This article will share with you some vscode essential plug-ins that improve the efficiency of front-end development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
[Recommended learning: "vscode tutorial"]
vscode front-end essential plug-in - improve development Efficiency
##1. Auto Close Tag
Automatically close HTML/XML tag
2. Auto Rename Tag
Automatically complete the synchronous modification of the tag on the other side
3. Beautify
Format code. It is worth noting that the beautify plug-in supports custom formatting code rules
4. Bracket Pair Colorizer
Add different colors to brackets to distinguish different blocks. Users can define different bracket types and colors 
Map breakpoints on vscode to chrome for easy debugging
A good-looking font
##7. GitLens
Convenient to view git logs, a must for heavy git users
8, HTML CSS Support
Intelligent prompt CSS class name and id
##9, HTML Snippets
Intelligent prompt HTML tags, and tag meaning
11. jQuery Code Snippets
13. markdownlint
##14. Material Icon Theme
Personally think that the best vscode icon theme supports the replacement of icons of different colors. It is worth pointing out that this plug-in is updated extremely frequently, basically consistent with the update frequency of vscode
15. open in browser
Unlike IDE, vscode can open HTML directly in the browser, but this plug-in supports shortcut keys and right mouse button. Open html files in the browser, support customized opening of specified browsers, including: Firefox, Chrome, Opera, IE and Safari
16. Path Intellisense
Automatically prompts file paths and supports various quick import files
##17、React/Redux/react-router Snippets
React/Redux/react-router syntax smart tips
18, Vetur
Vue multi-functional integrated plug-in, including: syntax highlighting, smart prompts, emmet, error prompts, formatting, automatic completion Full, debugger. vscode officially designated Vue plug-in, a must-have for Vue developers.
Let the vscode resource tree directory add
html code detection
A tool for quickly switching between multiple projects
22, fileheaderTop comment template, you can define the author and time and other information, and will automatically update the last modification time. The shortcut key ctrl alt i automatically enters the author information and modification information at the beginning of the file
The current file size is displayed in the status bar at the bottom. After clicking, you can also see the detailed creation and modification time
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. In addition, it can be used out of the box in projects using JSX or TypeScript
Use this plugin , you can trace back to where the CSS classes and ids are defined in the 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.
By using the HTML template plug-in, you get rid of the need to rewrite headers and headers for new HTML files. The trouble with body tags. You just type html into an empty file and press the Tab key to generate a clean document structure.
Prettier is currently the most popular code formatter in web development. Once this plugin is installed, it can automatically apply Prettier and quickly format the entire JS and CSS document into a unified code style. If you still want to use ESLint, there is also a Prettier – Eslint plug-in, you don’t want to miss it!
Provides you with information about using colors in CSS. You can preview the color model (HEX, RGB, HSL and CMYK) information in the color block by simply hovering the cursor over the color.
This is a plug-in that can add icon fonts to the project. The plugin supports over 20 popular icon sets, including Font Awesome, Ionicons, Glyphicons and Material Design Icons
##30, Minify
This is an application for compressing and merging JavaScript and CSS files. It offers a large number of customizable settings, as well as the option to automatically compress and save and export to .min files. It works with JavaScript, CSS and HTML via uglify-js, clean-css and html-minifier respectively. Use F1 to run the file minifier Minify
31、VueHelper
snippet code snippet
32、 Vue 2 Snippets
33, Vue VSCode Snippets
VUE code automatic completion plug-in
34, Git History
Git submission history
35、Setting Sync
Synchronize your settings and plug-ins
36、Reactjs code snippets
A React automatic patching tool.
37. Terminal
The built-in command line plug-in of vs code is also more practical.
38, npm Intellisense
Used to automatically fill in npm modules in the import statement.
39, npm
This extension supports running npm scripts defined in files, package.json and based on Defined dependencies verify installed module package.json.
40. Window Colors
Each VSCode window can be uniquely and automatically colored.
41. Live server plug-in
Open the local server
##42. Comment Translate
## Translation plug-in, select the text to translate
Beige eye protection theme, similar to Hbuild
##For more programming-related knowledge, please visit: 
Introduction to Programming
The above is the detailed content of Essential vscode plug-ins to improve front-end development efficiency (share). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
