36 commonly used front-end plug-ins in vscode, search and download directly!

Take advantage of the free time to sort out some commonly used vscode plug-ins, so that you have to search and download them again when you change computers later. , students who need it can save it first, and we will continue to update it if we get some new plug-ins later! [Recommended learning: "vscode tutorial"]

1. Indent-Rainbow

Let the indentation be colored

2. Material Icon Theme

Good-looking file icon

3. Beautify

Code formatting

4. Power Mode

A cool keyboard tapping effect

5. Vetur

Powerful vue development support tool

6. vscode-fileheader

File header annotation information

7. Vue CSS Peek

Provide css conversion definition support for single-page vue files

8. Vue Peek

Click on the component to jump to the component definition file

9. Vue VSCode Snippets

Some data, method and other functions in Vue automatically complete prompts to facilitate quick code writing;

10. Little Overlord

A Super Mario that can be played in vscode

11. translate. Hold the mouse over the selection for a few seconds to view the translated content.

12. filesize

Display the current file size in the status bar.

13. TabNine

Al auxiliary code completion artifact. Appropriate fields can be matched for you based on the coding habits you have written.

14. Auto Close Tag

Auto Close Tag

15. Auto Import

Auto Import Module

16. Auto Rename Tag

Ends automatic renaming of tag name when changing tag name

17. Quokka

is a debugging tool plug-in that provides real-time feedback based on the code you are writing. It is easy to configure and provides the ability to preview functions and calculated value results of variables. Plus, it works out of the box in projects using JSX or TypeScript.

18. CSS Peek

Using this plugin, you can trace to where CSS classes and ids are defined in your stylesheet. When you right-click 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 styling.

19. HTML Boilerplate

By using the HTML Boilerplate plug-in, you get rid of the trouble of rewriting the header and body tags for new HTML files. You just 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 colorful comments.

21. Error Lens

The warnings, errors, syntax problems (prompt wavy lines), etc. diagnosed by the editor are filled with color in the line background. Highlight the prompt and display diagnostic information at the end.

22. Prettier

is currently the most popular code formatter in web development. With this plugin installed, it automatically applies Prettier and quickly formats entire JS and CSS documents into a unified code style. If you still want to use ESLint, there is also a Prettier-Eslint plug-in, don’t miss it!

23. color highlight

A commonly used code highlighting plug-in

24. Color Picker

Color picker

25. Git Blame

Can find out who wrote that code

26. ESLint

eslint plugin

27. TODO Highlight

TODO Highlight

28. Trailing Spaces

Highlight trailing spaces and let your "space" obsessive-compulsive disorder appear

29. VS Code Counter

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

30. Bracket Pair Colorizer

Colorize matching brackets

31. Code Spell Checker

spellchecker. For example, if the word "banana" is misspelled as "banane", you will be prompted whether to change it to "banana". You can also add "banane" to the dictionary of the checker.

32. Path Intellisense

Autocomplete file names

33. Rainbow Fart

Official overview:VSCode Rainbow Fart is an extension that continues to praise your awesome writing when you are programming. It can play a real-person voice that is close to the meaning of the code based on the code keywords.

34. any-rule

You can quickly use regular expressions in vscode without the help of Du Niang!

35. ## Todo Tree

Todo Tree is a plug-in that prompts to-do events. Add //TODO## at the beginning of the code comment. #, the entire comment will be highlighted;

36. ## project-tree

This is a plug-in that automatically generates the project structure;

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of 36 commonly used front-end plug-ins in vscode, search and download directly!. For more information, please follow other related articles on the PHP Chinese website!