foreword
You can refer to the plug-ins I recommend below. Note: the purpose of the plug-in is to improve the efficiency of development and save development time. Like checking some bugs, spelling mistakes, etc., you can use the plug-in to quickly identify and avoid wasting on finding errors. Too much time, but remember not to rely too much on some plug-ins, which will reduce the ability of our code in the end, which will be counterproductive~~~, go directly to the topic =>
1、HTML CSS Support
Support CSS wake-up intelligent prompts, which can provide you with intelligent prompts and quick refactoring tools when editing HTML and CSS files
2、JavaScript (ES6) code snippets
Smart prompt code blocks, the plugin contains many of the most common JavaScript syntax blocks, and uses easy-to-understand naming methods to quickly identify and use these syntax blocks. For example, to create an arrow function , you can simply type "afn" and press tab to generate
3、 Vue 3 Snippets
This plugin provides rich code snippets (snippet) for Vue.js 3, which is convenient for quickly writing common code structures and attributes, shortening development time and improving coding efficiency
4、Volar（view 3）
An efficient tool to support Vue 3 developers, providing functions such as syntax highlighting, intellisense, code completion and formatting, in addition, Volar can also generate more detailed type hints, provide template source code high-level Bright and smart completion and other features help front-end developers write standard-compliant code more quickly
5、Auto Close Tag
A plug-in that helps front-end developers complete automatic closing of HTML/XML tags. The plug-in can respond to the user to automatically add the corresponding closing tag when opening the tag , thereby reducing the time and effort of writing HTML/XML code.
When you use the Auto Close Tag plugin, after typing an opening tag it will automatically fill in its closing tag. For example, if you enter "<div>", the plugin will immediately add "</div>" to the right of the cursor . In addition, it can automatically identify pairwise mislabeling cases and provide you with suggestions on how to correct the labels.
6、Auto Rename Tag
A plugin to help front-end developers automatically rename HTML/XML tags. This plugin can change the name of another tag while modifying the opening tag or closing tag, saving the time and trouble of manually renaming tags with the same name .
When you install and use this plugin, when editing HTML or XML files with this feature enabled, if you change the name of the opening tag, the plugin will automatically rename and replace the closing tag accordingly. In this way, when elements or components often need to be renamed in the project, the renaming consistency is ensured, and the code editing process is simplified without requiring manual search and replacement between multiple files.
7、Indent-Rainbow
A plugin to help front-end developers quickly identify the indentation level of code blocks and color them. The plugin can use different colors for different indentation levels, helping you to more easily find crossing points between the inside and outside of code blocks.
When you use the Indent-Rainbow plugin in VS Code, it will automatically detect all nesting and indentation in the current code area, and use different colors to visualize each indentation level. In this way, when you have many layers of code or deep indentation, you can distinguish each nested block by color, helping you prevent missing symmetrical symbols (such as curly braces, square brackets, etc.) An unknown error caused by the indentation level of .
8、Material Icon Theme
A plugin to help front-end developers quickly beautify and distinguish file and folder types. The plugin can use unique icons for different types of code files and folders, making it easier for you to find and identify related files.
When you use the Material Icon Theme plugin, it automatically categorizes file and folder types and displays the corresponding icons. For example, you'll see specific icons for JavaScript files, CSS and HTML files, README.md files, and many other file types. Plus, it can be customized for folders you create yourself or specific file types to better match your needs.
9、Path Intellisense
A plugin to help front-end developers quickly input file paths . The plugin optimizes the coding experience, increases efficiency and accuracy, and avoids misspellings and other common mistakes when manually typing path names .
When you use the Path Intellisense plug-in, it will automatically analyze the file path in the code you are editing and provide path suggestions (such as a prompt box), including local files, folders or summarized content that match typing (history ). This saves you a lot of time and improves coding accuracy by eliminating the need to remember exact file paths or manually type long pathnames .
10、Live Server
A plug-in that helps front-end developers quickly create local servers and quickly display and preview web pages. This plug-in enables you to directly obtain the real-time refreshed web page content after editing HTML, CSS, Javascript and other front-end files.
When you use the Live Server plug-in, it will automatically open a server and monitor the directory where the HTML file you choose is located. When you save your HTML, CSS or JS code, the plug-in will also demonstrate the result of the changes in real time, and you can preview the changes instantly in the editor interface or even in your browser.
11、Code Spell Checker
A plugin to help developers check for typos. This plugin helps you easily check English words in your code (including variable names , comments and documentation comments) to ensure they are spelled correctly. This greatly increases the likelihood that developers will write clear and understandable code that avoids bugs.
When you use the Code Spell Checker plugin, it will automatically flag misspelled words in the editor interface and provide suggested correction methods. If you click on the suggestion, it will easily replace the word with the correct English word so that you can further improve the quality of the code.
This plugin has certain shortcomings. If you define a multi-word flattened variable during development, the camel case is not used. The formal naming of the method will also report an error. Generally speaking, the advantages outweigh the disadvantages, and you can use it according to your own needs.
12、Error Gutters
Add error and warning messages to the "gutters" area next to line numbers in the source code in the editor (this area is on the left side of the editor). This makes error messages easier to detect and helps developers find and fix bugs faster when writing code
13、Prettier - Code formatter
Help front-end developers to automatically format code to make code more readable and reduce errors and bugs caused by non-standard code style
14、ESLint
Using ESLint can help you follow some best practices and guidelines, which can be customized and shared across projects. "Rules" are configuration items that define code quality standards. This plugin supports many types of JavaScript syntax and frameworks such as ECMAScript 6 and 7, React and AngularJS, etc. Through the static analysis of the code , it can quickly identify errors or irregularities in the code, and give prompts or warning information to help developers better improve the code logic.
Note: For those who are just starting to learn the front-end, it is extremely not recommended to install this component at the beginning. Don’t ask why. After installing ESLint, you may mistakenly type a space and an error will be reported, and it is very difficult to find, so in order to prevent mental collapse, It is recommended to wait until the complete project is done later to consider the issue of code standardization.
Of course, if you insist on adding ESLint, you can use it with the above Prettier plug-in to automatically format the code for you after saving. It will be a little troublesome to configure some files, but once and for all, you can refer to the following article for specific configuration
Some configuration rules of ESLint can be viewed on the official website: http://eslint.cn/docs/rules
Using ESLint with Prettier: ESlint and Prettier Configuration Guide