Plug-ins provided by Traversy Media, the mentioned plug-ins are basically in use, and really pretty good, so recommended to everyone, if you have a good plug-in can leave a comment, share to more front-end developers.

1.Live Server

Remind the browser to start local services for

2.Live Sass Compiler

Support sASS direct compilation to CSS files

3.HTML CSS Support

Support for HTML authoring class prompts for class names that have been defined

4.Auto Rename Tag

JSX, Vue, HTML, when modifying the tag name, you can modify the corresponding end (start) tag when you modify the start (end) tag, help you reduce the keystroke by 50%;

5.Prettier – Code formatter

In fact, it is already the standard tool for code formatting, supporting the formatting of almost all front-end code, and similar to EditorConfig, supporting the configuration of formatting rules with files.

6.JavaScript (ES6) code snippets

JavaScript snippets in ES6 syntax (JavaScript and TypeScript support)

7.Turbo Console Log

Debugging is made easier by automating the writing of meaningful log messages.

8. The Guides indent references

Instead of built-in Indent Guides, Guides let you change the color, style, background color of the Indent space, etc., through configuration items, and even create Guides that look like Indent Rainbow if you’re willing to play around with them. Below is the configuration of the guide when I used the Solarized Dark theme:

{
    "guides.normal.color.dark": "Rgba (91, 91, 91, 0.6)"."guides.normal.color.light": "Rgba (220, 220, 220, 0.7)"."guides.active.color.dark": "Rgba (210, 110, 210, 0.6)"."guides.active.color.light": "Rgba (200, 100, 100, 0.7)"."guides.active.style": "dashed"."guides.normal.style": "dashed"."guides.stack.style": "dashed",}Copy the code

9.Bracket Pair Colorizer

Identify the brackets in the code, and mark the different colors, so that you can easily scan the matching brackets. In the case of using too many brackets, it can reduce the eye pressure. The editor shortcut key is good, but in the case of near nesting, it is not enough

10.Code Spell Checker

Strongly recommended for most non-native English speakers don’t want to write a pantomime horse variable name programmers, memorization correct spelling words still have a lot of challenges, need to check online dictionary than when ambiguity, this plug-in can real-time identification of spelling errors, and give prompt, quite a few bugs because the spelling error.

11. GitLens – Git supercharged

The use of VSCode with Git is optimized to the extreme, so that we can know the cursor position code modification time, author information and so on without leaving the editor, without executing any command.

12.Auto-Open Markdown Preview

Automatically open Markdown preview when opening Markdown file

13.Vetur

Vue projects support plug-ins

14.ES7 React/Redux/GraphQL/React-Native snippets

The React project supports plug-ins