A great feature of VS Code is support for plugin extensions, which make your editor feel like it has three head and six arms, which can greatly increase productivity.

In the image above, click on the red box to find the name of the plugin you want in the input box and install it.

Here recommend some practical plugins, recommended collection spare!

1. Gitlens

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

  • By placing the cursor in the current direction of the code, you can see who committed the code and when it was committed. This is the most convenient feature of GitLens.
  • Look at the code change record for a Commit
  • Look at the different branches
  • You can compare the two Commit codes
  • You can even compare the two branches as a whole. This is arguably the most powerful feature of GitLens. This can be used when reviewing code on different branches.

2, Git History

For those of you who are used to using the Git management tool in your editor and are not so keen on opening another Git UI tool, this plugin will allow you 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 performance in real time on the web page. You don’t have to manually refresh the page every time.

Usage: After installing the plug-in, start writing code; When the code is written, right-click and select “Open with Live Server”.

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

Make the software display in Simplified Chinese.

5, Bracket Pair Colorizer 2: Highlight pairs of brackets

Bracket Pair Colorizer 2 plugin: Displays pairs of brackets in different colors and marks the brackets range with a line. Rainbow brackets for short.

In addition, there is a Rainbow Brackets plugin that can also highlight pairs of Brackets.

6. SFTP: File Transfer

If you need to be local files through the form of FTP to the LAN server, you can install SFTP this plug-in, very easy to use. It’s used a lot in the company.

7, Open in browser

After installing the Open In Browser plugin, right-click on the HTML file and select -> Open In Default Browser to preview the web page in the browser.

8, highlight-icemode: When the same code is selected, make the highlighting more obvious

VC code comes with highlighting, it is not obvious enough. Use plugins to support it.

After using 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 based on the suffix name of the file. This will give you a more intuitive idea of what type of file each one is.

10, the Project Manager

In the work, we often switch back and forth multiple projects, each time to find the corresponding project directory and then open, more troublesome. The Project Manager plugin can solve this problem. It provides a special view to display your projects. We can save the frequently used projects here and switch between them with one click when necessary.

11, TODO Highlight

What do you do when you discover a Bug in the middle of writing code, but don’t want to stop what you’re working on so that you don’t interrupt your train of thought? According to the code specification, we usually add a TODO comment to the code. For example :(Be sure to write Todo in uppercase, not lowercase)

// Todo: There is a bug here, I will fix you later

Or:

// Fixme: I don't know why, but it works only that way.

After installing the Todo Highlight plugin, hold down “Cmd + Shift + P” to open the command panel, type “todoHighList”, select the relevant command, we can see a list of Todolist.

12, Markdown Preview GitHub Styling

Preview Markdown style in GitHub style, very simple and elegant. Like this, the left side writes Markdown text and the right side previews how Markdown will render:

13. Markdown Preview Enhanced

Preview Markdown styles.

Markdown All in One

This plugin will help you document in Markdown more efficiently.

14, Vetur

Vue multi-functional integration plug-in, including: syntax highlighting, intelligent prompts, Emmet, error prompts, formatting, autocomplete, debugger. The official VS Code Vue plugin is a must for Vue developers.

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

Syntax intelligence tip for React/Redux/ React -router.

16, MinApp: small program support

Small program development essential plug-in.

17, Prettier: code formatting

Prettier is a code formatting tool that focuses only on formatting but does not have validation capabilities. In a team of many people working together, it is important to have a consistent code code. A set of specifications allows us to write code with a consistent style, improving readability and consistency. Nature maintainability will also be improved.

18, ESLint: Code format validation

In daily development, it is recommended to use Prettier for code formatting and ESLint for validation.

19, Beautify

Code formatting tools.

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

20, JavaScript(ES6) code snippets

ES6 syntax smart prompt, support fast input.

21, Search node_modules

There are so many folders and modules in the node_modules module that it’s hard to find them. After installing the Search node_modules plugin, type the shortcut “Cmd + Shift + P”, then type node_modules and select Search node_modules from the options that pop up. You can search for modules in node_modules.

22, indent-rainbow: Highlight the indentation of code

Indent-Rainbow Plugin: Highlight code indentation.

After installation, the effect is as shown in the figure below:

23, Code Spell Checker: Word spelling check

The goal of this spellchecker is to help catch common misspellings of words, which can detect hump naming. Goodbye to Chinglish.

24. Local History

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

25, Polacode-2020: Generate code screenshots

You can save snippets of code as beautiful images, with different color schemes depending on the theme, or you can customize the border color, size, and shadow of the image.

This is especially useful if we need to use snippets for PowerPoint sharing, or if we need to share snippets gracefully on the web.

The resulting effect is as follows:

Other similar plugins: Codesnap. We can also generate code images at https://carbon.now.sh/

26, Image Preview [Recommendation]

Image preview. When the mouse cursor moves over the image URL, it automatically displays the preview and image size of the image.

27, Auto Close Tag, Auto Rename Tag

Automatically close the label and rename the label.

28, Better Comments

Add bolder, categorized colors to comments.

29, CSS Peek

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

30, Vue CSS Peek

CSS Peek has no support for Vue; the plug-in provides support for Vue files.

31, Color Info

This handy plugin will provide you with information about the colors you use in your CSS. You can preview information about the color models (HEX, RGB, HSL, and CMYK) in the color block by hovering the cursor over the color.

32, the Import Cost

During the course of a project, we will introduce many NPM packages, sometimes only using one method in a package, but introducing the whole package, resulting in a lot more code. The Import Cost plugin gives us a nice hint in the code about how much volume will be added by the currently introduced package, which helps us optimize the size of the code.

33, Paste JSON as Code

This plug-in converts JSON strings from the Clipboard into working code. Multiple languages are supported.