Shulou(Shulou.com)06/02 Report--

Editor to share with you what are the daily development plug-ins in VSCode, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Visual Studio Code is a lightweight but powerful source code editor, lightweight refers to the download of Vs Code is actually a simple editor, powerful refers to the support for multiple languages of the environment plug-in extension, it is precisely because this support plug-in installation environment development let Vs Code become the overlord of the development language, so that support for the development of multiple languages become possible.

As the saying goes, good work must first sharpen its tools, as an Vs Code regular user, I think installing some useful plug-ins more than their own daily development efficiency can be greatly improved, the following I recommend is my daily development of more and feel good in the use of some plug-ins, at the same time will continue to update, if you think there are good plug-ins and I did not mention here can be left a message below I will make up.

Vs Code related link address: Vs Code official website address:

Https://code.visualstudio.com/

Vs Code GitHub source code address:

Https://github.com/Microsoft/vscode

Vs Code plug-in Market address:

Https://marketplace.visualstudio.com/

Vs Code extension plug-in installation:

Shortcut key: Ctrl+Shift+X enters the expansion panel and searches for the extension in the app store text box.

Chinese (simplified) language pack for VS Code:

Extension name: Chinese (Simplified) Language Pack for Visual Studio Code

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

Extension description: this Chinese (simplified) language pack provides a localized interface for VS Code.

Beautify the code for VS Code:

Extension name: Beautify

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Extension description: beautify javascript,JSON,CSS,Sass, and HTML in Visual Studio code.

Icon for Visual Studio code:

Extension name: vscode-icons

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Extension description: vscode-icons can not only add comfortable icons to folders and files, but also automatically detect projects, with different icons according to different functions of the project, such as git, Markdown, configuration items, tools, etc.

Automatically add a close label:

Extension name: Auto Close Tag

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Extension description: automatically add HTML / XML close tags, the same as Visual Studio IDE or Sublime Text (very useful for front-end developers).

Vs Code's best code comment extension:

Extension name: Better Comments

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Extension description: better comment extensions will help you create more human comments in your code. Using this extension, you will be able to classify comments as alerts, queries, to-dos, highlighted, commented-out code can also be styled so that the code should not exist, and you can specify any other comment style in the settings.

Find and fix problems in the JavaScript code:

Extension name: ESLint

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Extension description: ESLint is a code specification and error checking tool with the following features

1. Everything is pluggable. You can call any rule api or formatter api to package or define rule or formatter.

2. Any rule is independent.

3. There is no specific coding style. You can configure it yourself.

ESLint configuration details: https://blog.csdn.net/mafan121/article/details/77965252?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

Git source control plug-in GitLens, which is easy to use in Vs Code:

Extension name: GitLens

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Extension description: GitLens's ability to build into the Visual Studio code Git. It can help you see the identity of the code author at a glance through Git responsible comments and code shots, navigate and browse the Git repository seamlessly, gain valuable insights through powerful comparison commands, and so on.

Vs Code source control plug-in GitLens user guide: https://www.jianshu.com/p/95a1a06ac0fb

Git History View:

Extension name: Git History

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Extension description: Git history, search and more (including git log).

Process diagram artifact-Drawio:

Extension name: Drawio Preview

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=purocean.drawio-preview

Extension description: preview the drawing file in Vs Code.

Using Drawio: https://blog.csdn.net/huanglin6/article/details/106239570 in Vs Code

Automatic path completion of Import and Require modules:

Extension name: Path Intellisense

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Extension description: enter the path of the corresponding file in the editor and it will be completed automatically (it is very convenient and easy to use when importing / importing modules in Import and Require).

Vue development prerequisites-Vetur (VS Code's Vue tool):

Extension name: Vetur

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=octref.vetur

Extension description: Vue multi-functional integration plug-ins, including: syntax highlighting, smart tips, emmet, error prompts, formatting, automatic completion, debugger. Vscode officially appointed the Vue plug-in, which is a must for Vue developers.

Help Vue developers write more efficient Element-UI code:

Extension name: vscode-element-helper

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper

Extension description: VSCode-Element-Helper is Element-UI 's VSCode extension, and Element-UI is a great library. More and more projects are using it. Therefore, to help developers write more efficient code through Element-UI.

Vue VSCode fragment:

Extension name: Vue VSCode Snippets

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

Extension description: Vue syntax fragment extension.

Vs Code runs the C# extension:

Extension name: C#

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

Extension description: lightweight development tools for .NET Core. Powerful C # editing support, including syntax highlighting, IntelliSense, go to definition, find all references, etc. Debugging support for .NET Core (CoreCLR). Note: Mono debugging is not supported. Desktop CLR debugging is supported. Limit. Project.json and csproj projects are supported on Windows,macOS and Linux.

Using Vs Code to develop .NET Core refer to this blog: https://www.cnblogs.com/yilezhu/p/9926078.html

Angular development prerequisites-VS Code's Angular TypeScript code snippet:

Extension name: Angular Snippets (Version 9)

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2

Extension description: this extension of Visual Studio Code adds code snippets of Angular for TypeScript and HTML.

Vs Code Chrome Debugger:

Extension name: Debugger for Chrome

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Extension description: debug JavaScript code in a Chrome browser or any other target that supports the Chrome Debugger protocol.

Vs Code Code Runner:

Extension name: Code Runner

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Extension description: code snippets or code files running in multiple languages C, Clippers, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (. NET Core), C # Script, C # (. NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Kotlin Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, and custom commands.

Full language autocomplete program-TabNine:

Extension name: TabNine

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

Extension description: this is the VS Code client of TabNine (autocomplete program for all languages). Index the entire project and read .gitignore to determine which files to index. Use mnemonic completion engine to type a long variable name with just a few keystrokes. Zero configuration. TabNine is available right out of the box. Quick response: a list of suggestions is usually generated in less than 10 milliseconds.

Details: https://zhuanlan.zhihu.com/p/73811872

Icon font for Visual Studio code:

Extension name: Icon Fonts

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts

Extension description: icon fonts is a plug-in that provides VS Code icons and font abbreviations. Although it looks inconspicuous, but for front-end development, this tool can be said to greatly improve development efficiency. With some abbreviations, you can quickly complete icon fonts-related code snippets, which reduces manual typing by more than 80%. Icon fonts supports html, css, less, sass, scss, stylus, jsx, blade, vue.

Gitlink is a plug-in that facilitates and enhances the use of VS Code GitHub:

Extension name: Gitlink

Plug-in Market address: https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

Extension description: gitlink is a plug-in that facilitates and enhances the use of VS Code GitHub.

It has the following two characteristics:

Go to the online link to the current file.

Copy the online link of the current file to the clipboard.

These are all the contents of the article "what are the daily development plug-ins in VSCode?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.