To do a good job, you must sharpen your tools. As a professional developer (MO), VSCODE is one of our must-have tools. However goose, as all aspects of the requirements (lazy) to the extreme we, the following VSCODE essential plug-in, will let you open (MO) hair (YU) process save a lot of work! Without further ado, let’s begin
Auto Close Tag
Enter the start label to automatically complete the end label without manually entering the end part.
Auto Rename Tag
When you modify a label, modify either the start label or the end label to automatically modify the corresponding label of the other label.
HTML Snippets
H5 code fragment completion and hints.
HTML CSS Support
Writing classes in HTML intelligently prompts for styles supported by the current project and supports SCSS file retrieval.
JavaScript (ES6) code snippets
ES6 code automatic completion, one of the necessary plug-ins.
Browser Preview
The ability to preview the current effect using the browser window in VSCODE.
CSS Peek
You can navigate to the CSS definition or preview the CSS code directly in HTML by using the CSS ID or class. Easy to debug CSS styles.
ESLint
Js syntax error correction, you can customize the configuration, write high quality, in line with the specification of the code can not only trust yourself, configuration is more complex, you can download the general configuration or internal team agreed.
Prettier – Code formatter
A format (beautify) your messy code, formatting magic!
Beautify
Another code beautification plug-in, can quickly format your code format, so that when you write code messy code structure instantly become very neat, code obsessive-compulsive disorder necessary, better code format in the later maintenance and others will have a lot of convenience when reading. Plugins support a wide range of languages, covering almost all of the current languages, and you can customize the structure of the code formatting.
Reactjs code snippets
React code completion plugin.
Vetur
Vue multifunctional integration plug-in, including: syntax highlighting, smart tips, Emmet, error tips, formatting, auto-complete, debugger. Vue plugin is an official Vue plugin for Vue developers.
Bracket Pair Colorizer 2
Have you ever had trouble finding the margin of a parenthesis area when you’re immersed in rambling code? Have you ever had trouble finding the default parenthesis area when fixing a BUG in copy-oriented programming?
Bracket Pair Colorizer is a Bracket Pair Colorizer designed specifically for Bracket closure. The Bracket color is different to find the scope of the code. It can be used together with any topic.
indent-rainbow
Align indent to add different colors to make it more readable.
Material Theme
Recommended theme, handsome appearance to move brick life full of ritual feeling ~ ~
Material Theme Icons
Recommend icon, again small detail also escapes nevertheless front end person sharp eye 👀
npm Intellisense
The VSCode plug-in can automatically complete the NPM module name in the import statement. At the same time, there is a Node.js Modules Intellisense developed for NODE, which is better with food flavor.
Code Runner
Support immediate execution of code in multiple languages. Convenient and fast.
Debugger for Chrome
Code debugging with Chrome. When the code is running in Chrome, you can directly add a breakpoint in VSCode. Click run and the page in Chrome will continue to run. After executing the breakpoint you added in VSCode, you can step directly in VSCode.
Document This
Without comments, you might write your own code and one day you won’t be able to understand it. Elegant comments are necessarily an integral part of elegant code. Document This can quickly help you generate annotations, such as some function annotations can also help you extract the definition of parameters, etc., is your standard code necessary tools.
Path Intellisense
Automatically prompt the file path, quickly introduce the file, never manually click the file path….
Live Server
A small server with real-time loading capabilities that can be used for simple development processes.
Import Cost
The plug-in displays the size of the imported package at the end of the line. To calculate the package size, the plug-in uses Webpack and babili-webpack-plugin.
LeetCode
Click LeetCode on VSCODE, one word, cool!
Trailing Spaces
Highlight redundant Spaces, elegant code can not tolerate a little flaw!
