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!
