Summary of necessary vscode plug-ins in front end


Essential plug-ins

Auto close tag: HTML tags can be closed automatically

Auto rename tag: when modifying HTML tags, the matching tags can be modified automatically

Beautify: Javascript, JSON, CSS, sass, HTML formatting

Chinese (Simplified) language pack: Simplified Chinese version

Codelf: variable naming artifact, no longer have to worry about how to name variables

Color Info: hover over the color cursor to display the color models RGB, HSL, CSS color name, HSV, lab, CMYK

CSS peek: select a class name or ID name in HTML, and you can directly locate the CSS location of the name

Debugger for chrome: run code in chrome and debug with vscode.

Document this: generates code comments for the document for the JS file.

Eslint: eslint plug-in to check syntax errors during programming.

Gitlens git supercharged: it can display the code writer and time directly at the cursor

HTML boilerplate: HTML template plug-in to get rid of the trouble of rewriting header and body tags for new HTML files

HTML CSS support: CSS attribute prompt in HTML

HTML snippets: automatic completion of HTML code

Indent rainbow: color indents

JavaScript (ES6) code snippets: code snippets tips

JavaScript booster: code refactoring to help you optimize your code

JQuery code snippets: code fragment tips

Convert sarss / CSSS to real time
Live server: modify file browser automatically refresh; browser automatically open project; local development build temporary service

Open in browser: after installing this plug-in, you can right-click HTML in the editor menu and open it in the default browser

Path IntelliSense: automatically complete the file name

Prettier – code formatter: code formatting

Quokka.js : is a debugging tool that provides real-time feedback on the code you are writing. It can preview the function of the variable and the result of the calculated value

Rainbow brackets: Rainbow brackets to prevent bracket confusion in code

Tslint: tslint plug-in to check syntax errors during programming

Webpack: the webpack plug-in. You can create a webpack configuration file directly according to your needs. You don’t need to configure it yourself

Vue plug in

Vertur: powerful Vue development plug-in, providing syntax highlighting, code prompt, error detection, formatting and other functions

Wechat applet plug-in

Vscode weapp API: provide wechat applet API support and code fragment tips

Minapp: realize the automatic completion function of wxml file in wechat applet

Wechat snippet: input keyword prompt wechat applet code fragment

Wxml: format wechat applet wxml file

Wxss peek: provides jump to definition for wxss style

Flutter plug-in

Some fluent snippets: Code hint snippet for fluent

Flutter: a plug-in for flutter, which can be supported in vscode