1. Startup related

1.1 the open in the browser

Right-click the HTML file to run the current static web page directly in the default browser

1.2 the Live Server

Simulates the local server, prepares the webpage saves after the automatic refreshes, does not need to go to the browser refreshes

2. Compiler dependency

2.1 Material Icon

Change the file icon in the editor. The system’s built-in folder icon does not distinguish between different types of files, using this plug-in can make the files look more obvious

2.2 Color Info

This handy plugin will give you information about the colors you use in your CSS. You can preview the HEX, RGB, HSL and CMYK information of the color model in the color block by hovering the cursor over the color

2.3 the TODO Tree

This plugin helps you organize and manage TODO comments when developing or reviewing code. The TODO tags you annotate in your code are displayed in the sidebar. Click on the tags to jump to the appropriate location in the file. Not limited to TODO annotations, of course, you can customize administrative tags such as FIXME, etc. The plugin has TODO, FIXME, and BUG tags by default, but you can also define the tags you want in your Settings

2.4 One Dark Pro

This is the theme of VsCode to make code highlighting more elegant

2.5 the Power Mode

Code effects plugin, open Settings in the lower left corner, then go to the location shown below, open the document, and add the configuration

ShakeIntensity controls window shakeIntensity. The default value is 6. If you want no shake, set it to 0

{..."powermode.enabled": true."powermode.shakeIntensity": 0
}
Copy the code

3. Coding is relevant

3.1 vscode – faker

Can help you quickly insert use case data. Faker can randomly generate names, addresses, images, phone numbers, or the classic jumble of fake paragraphs, and each category contains subcategories that you can use as you see fit

3.2 Bracket Pair Colorizer

This plugin allows different brackets in your code to have different colors, making your code more distinct

3.3 Prettier-code formatter

A variety of front-end code formatting plug-ins, right click format

3.4 Auto Rename the Tag

Automatically modify the matching HTML tags. When modifying tags, the matching tags can be modified together

3.5 ESLint

JavaScript syntax error correction, you can customize the configuration, also can refer to the official website configuration, straighten out the developer’s code grid writing format