One of the most powerful features of VS Code is its support for add-ons, which make your editor more efficient.

In the above picture, click the part in the red box to find the name of the plug-in you want in the input box, and then install it.

Here recommend some practical plug-in, suggest collect spare!

1. GitLens

It is a Git magic tool and a must for code farmers. GitLens has many powerful Git management features, such as:

  • Place the cursor over the current line of code to see who committed the code and when. This is the most convenient feature of GitLens.

  • View code changes for a COMMIT

  • Look at the different branches

  • Two Commits can be compared in code

  • You can even compare the entire code of two branch branches. This is the most powerful feature of GitLens. This can be used when reviewing code in different branches.

2, Git History

Some students are used to using the Git management tool in the editor, rather than opening up another Git UI tool, this plug-in meets your need to query all your Git records.

3. Live Server

Start a server locally, and after the code is written, you can achieve “hot update” and see the results in real time on the web page. You don’t have to manually refresh the page every time.

How to use: After installing the plug-in, start writing code; After the code is written, right-click and choose “Open with Live Server”.

4, Chinese (Simplified) Language Pack for Visual Studio Code

Make the software display as simplified Chinese language.

1, Bracket Pair Colorizer 2: Bracket Pair Colorizer

Bracket Pair Colorizer 2 plug-in: Bracket pairs are shown in different colors and Bracket ranges are marked with lines. Rainbow brackets for short.

Rainbow Brackets can also be used to highlight pairs of Brackets.

6. SFTP: File transfer

If you need to transfer local files to the local area network server through FTP, you can install SFTP plug-in, very easy to use. It’s used a lot in the company.

7, Open in browser

After installing the Open in Browser plug-in, right-click the HTML file and choose -> Open in Default Browser to preview the web page in the browser.

8, highlight-icemode: make the highlighting more obvious when selecting the same code

VSCode’s built-in highlighting is just not noticeable enough. Support it with plugins.

With this plugin, VS Code’s built-in highlighting can be turned off:

Add in the user Settings “editor. SelectionHighlight” : false.

9, vscode – the ICONS

Vscode-icons will display different ICONS according to the file name suffix, giving you a more intuitive idea of what type each file is.

10, the Project Manager

At work, we often switch back and forth between multiple projects, and each time we have to find the corresponding project directory and then open it, which is quite troublesome. The Project Manager plugin solves this problem by providing a dedicated view of your Project, where you can save frequently used projects and easily switch between them with one click.

11, TODO Highlight

In the process of writing code, suddenly found a Bug, but do not want to stop the hands of the work, so as not to interrupt the train of thought, how to do? According to the code specification, we usually add a TODO comment to the code. For example :(note that it must be written in uppercase TODO, not lowercase TODO)

//TODO: There is a bug, I will deal with you laterCopy the code

Or:

//FIXME: I don't know why, but it works only that way.Copy the code

After installing the TODO Highlight plugin, hold down “Cmd + Shift + P” to open the command panel, type “Todohighlist”, select the relevant commands, and we will see a list of todoList.

12, Markdown Preview Github evaluation

Preview Markdown style in GitHub style, very simple and elegant. Write the Markdown text on the left and preview the Markdown rendering on the right as follows:

13. Markdown Preview Enhanced

Preview Markdown styles.

Markdown All in One

This plugin will help you document in Markdown more efficiently.

14, Vetur

Vue multifunctional integration plug-in, including: syntax highlighting, smart tips, Emmet, error tips, formatting, auto-complete, debugger. Vue is an official VS Code plugin for Vue developers.

15 and ES7 React/story/GraphQL/React – Native snippets

React/Redux/react-router syntax smart tips.

16. Minapp: Support for small programs

Essential plug-in for small program development.

17, Prettier: Code formatting

Prettier is a code formatting tool that focuses on formatting but not validation. In a multi-person team, it is important to have a common code writing specification. A set of specifications allows us to write code in a consistent style, improving readability and consistency. Natural maintainability will also improve.

ESLint: code format verification

Prettier for formatting and ESLint for validation in routine development, it is recommended to use Prettier for code formatting and ESLint for validation.

19, Beautify

Code formatting tool.

Note: Prettier, by contrast, is the most popular code formatting tool, used more often than Beautify.

JavaScript(ES6) code snippets

ES6 syntax intelligent hints, support fast input.

21, Search node_modules

The node_modules module has so many folders and modules that it’s hard to find. After installing the Search node_modules plugin, enter Cmd + Shift + P, then enter node_modules, and select Search node_modules. You can search for modules in node_modules.

22. Indent-rainbow: Highlight code indentation

Indent-rainbow plugin: Highlight code indentation.

After installation, the effect is as follows:

23, Code Spell Checker: Word spelling error check

The goal of this spell checker is to help catch common word misspellings that can detect hump naming. Farewell to Chinglish.

24, Local History 【 recommend 】

Maintain a local history of files. Installation is highly recommended. When code is accidentally lost, it can sometimes save lives.

Polacode-2020: Generate code screenshots

You can save snippets of code as beautiful images, depending on the theme, the code color scheme is different, you can also customize the image border color, size, shadow.

This is especially useful when we need snippets for powerpoint presentations, or when we need to gracefully share snippets on the web.

The resulting effect looks like this:

Other plug-ins of this kind: CodeSnap.

26, Image Preview 【 recommendation 】

Image preview. When the mouse moves over the image URL, the image preview and image size are automatically displayed.

27. Auto Close Tag, Auto Rename Tag

Automatically close and rename labels.

28, Better Comments

Add more bold, categorized colors to your notes.

29, CSS Peek

Enhance the association between HTML and CSS to quickly see CSS styles on that element.

Vue CSS Peek

CSS Peek does not support Vue. The plug-in provides support for Vue files.

31, Color Info

This handy plugin will give you information about the colors you use in your CSS. You can preview the HEX, RGB, HSL and CMYK information of the color model in the color block by hovering the cursor over the color.

32, the Import Cost

During the development of the project, we introduced many NPM packages, sometimes using only one method in a package, but introducing the entire package, resulting in much larger code size. The Import Cost plug-in can help optimize the size of the code by providing a friendly reminder of how much volume is being added by the currently introduced package.

Paste JSON as Code

This plug-in converts JSON strings in the clipboard into working code. Support for multiple languages.