Take advantage of the empty time, some of the commonly used VScode plug-in arrangement, convenient to replace the computer after the search and download again, the need for students can first collect, the follow-up to get to some new plug-ins will continue to update!

1. Indent-Rainbow

Let the indents be colored

2. Material Icon Theme

Nice file icon

3. Beautify

Code formatting

4. Power Mode

A cool keyboard action

5. Vetur

Powerful vUE development support tools

6. vscode-fileheader

File header comment information

7. Vue CSS Peek

Supports CSS transfer definitions for single-page VUE files

8. Vue Peek

Click on the component to jump to the file defined by the component

9. Vue VSCode Snippets

Some data, method and other functions in Vue automatically complete hints, convenient to write code quickly;

10. Little overlord

A super Mario can play in vscode

11. A-super-translate

Underline translation. Hover and select for a few seconds to view the translation.

12. filesize

Displays the current file size in the status bar.

13. TabNine

Al auxiliary code completion artifact. You can match the appropriate fields based on the code habits you’ve written.

14. Auto Close Tag

Self closing label

15. Auto Import

Automatic import module

16. Auto Rename Tag

When the tag name is changed, the tag name is automatically renamed

17. Quokka

Is a debugging tool plug-in that provides real-time feedback on the code you are writing. It is easy to configure and has the ability to preview the results of functions and computed values for variables. In addition, it works out of the box in projects that use JSX or TypeScript.

18. CSS Peek

Using this plugin, you can track where CSS classes and IDS are defined in your stylesheet. When you right-click on the selector in the HTML file and select the “Go to Definition and Peek Definition” option, it will send you the CSS code for the style Settings.

19. HTML Boilerplate

By using the HTML template plugin, you get rid of the pain of rewriting header and body tags for new HTML files. You simply type HTML into an empty file and press the Tab key to generate a clean document structure.

20. Better Comments

Improve your code and make it more attractive by adding color comments.

21. Error Lens

Highlight warnings, errors, syntax problems (hint of wavy lines) that the editor has diagnosed by filling the line background with color, and display the diagnosis information at the end.

22. Prettier

Is the most popular code formatter in Web development today. After installing the Prettier plug-in, it automatically applies Prettier and quickly formats the entire JS and CSS document into a uniform code style. If you still want to use ESLint, there’s an Prettier — ESLint plugin for you, so don’t miss it!

23. color highlight

A more commonly used code highlighting plug-in

24. Color Picker

Color selector

25. Git Blame

We can figure out who wrote that code

26. ESLint

Eslint plug-in

27. TODO Highlight

TODO highlighted

28. Trailing Spaces

Highlight trailing Spaces to let your “space” ocD display

29. VS Code Counter

Count the total number of lines of code, the number of comment lines, the number of blank lines, and the language used.

30. Bracket Pair Colorizer

Colorize the matching parentheses

31. Code Spell Checker

Spell checker. For example, if banane is misspelled for banana, it will prompt you whether to change it to banana. You can also add banane to the inspector’s dictionary.

32. Path Intellisense

Autocomplete file name

33. Rainbow Fart

VSCode Rainbow Fart is an extension that keeps telling you how awesome your writing is while you’re programming. It plays a human voice that is close to the meaning of your code based on your code keywords.