Share some common plug-ins for VSCode development

This article introduces and shares some common plugins necessary for VSCode development. There is a certain reference value, friends in need can refer to it, I hope it will be helpful to everyone.


Related recommendation: "vscode tutorial"

Visual Studio Code must-have common plug-ins
Red is a strong recommendation, not to be missed o(∩_∩)o

Chinese (Simplified) Language Pack for Visual Studio Code
Simplified Chinese package

Prettier-Code formatter is the
strongest format, No rebuttal is accepted (uninstall JS-CSS-HTML Formatter in the app store to avoid automatic formatting when saving)

HTML Snippets
Super practical and elementary H5 code snippets and prompt

Code Runner
code compilation and running to see the results, support many languages

GitLens
rich The git log plugin

vetur
vue syntax highlighting, intellisense, Emmet and other

HTML CSS Support
let the html tag write class to intelligently prompt the style supported by the current project. The new version already supports scss file retrieval. This is also one of the necessary plug-ins.

Auto Close Tag
matches tags and closes the corresponding tags. Very practical [HTML/XML]

Auto Rename Tag
modifies html tags, and automatically helps you complete the synchronous modification of the tail closed tag.

Path Intellisense
Path smart prompt

JavaScript (ES6) code snippets
This plug-in provides ES6 syntax support for JavaScript, TypeScript, HTML, React, and Vue.

Live Server
browser refreshes in real time. Right-click "Open With Live Server" to open

open in browser
to view html files from the browser, and use the system's current default browser

Bracket Pair Colorizer to
make the brackets have independent colors, which is easy to distinguish. Can be used with any theme.

ESLint
ESLint code detection and verification

vscode-icon
let the vscode resource tree directory add icons, a must!

Debugger for Chrome
allows vscode to map chrome's debug function, static pages can be used to interrupt debugging with vscode, true 666~

IntelliSense for CSS class names in HTML
, intelligently prompt the name in the css file in the project in the

minapp
WeChat applet Smart completion of tags and attributes (supports native applets, mpvue and wepy frameworks, and provides snippets)

CSS Peek
tracks to the CSS class definition in the style sheet
ctrl+left mouse button click class or right mouse button "jump to definition ( F12)"

Manta's Stylus Supremacy
Formats stylus

jQuery Code Snippets
jquery A must for severe patients

Class autocomplete for HTML
Friends who write html code is a major manifestation of html code is repetition, if purely by hand, not only tired, but also affect the progress of the project, this automatic The completion plug-in is really great;

JavaScript Snippet Pack is
a plug-in for js, which contains common grammatical keywords of js, which is very practical;

Path Autocomplete is a tool for
intelligently completing

beautify
formatting codes, which can format JSON|JS|HTML| CSS|SCSS, is better than built-in formatting.

Use HTMLHint
html code to detect

VSCode Great Icons.
Another resource tree directory icon

colorize
will add a background of the current matching code color to the color code. It is very good that

Color Info
provides you with colors in CSS Related Information. You only need to hover the cursor on the color to preview the relevant information of the color model (HEX, RGB, HSL and CMYK) in the color block.

The
comment template at the top of vscode-fileheader can define the author, time and other information, and will automatically update the last modification time

Document This
js comment template (note: the new version of vscode has native support, enter /** tab on the function)

filesize
displays the current file size in the bottom status bar. After clicking, you can also see the detailed creation and modification time of

Bootstrap 3 Sinnpet
commonly used bootstrap You can

download the VueHelper
vue code to prompt

Bookmarks as
a bookmark tool, and it is still necessary

tortoise-svn
SVN integrated plug-in.

Recommended themes
Note: Set the switch in the file-preferences-color theme

Dracula Theme

One Dark Pro

monoka