Recommended plug-ins for front-end vscode, commonly used plug-ins for VSCode front-end

1.chinese

image.png
Function: change the interface of vscode into Chinese

2. Winter

image.png
Function: vue2 syntax highlighting, after installing this plug-in, the code is only colored in the vue file. In addition, if you can format the vue file
vue3, please install Volar

3. eslint

image.png
Function: Code inspection, I generally don’t use this, the wavy line affects my thinking

4.Prettier - Code formatter

image.png
Function: code formatting

5.open in browser

image.png
Role: Allow to open the current file in the default browser or application

6.Auto Close Tag

image.png
Role: Automatically rename pairs of HTML/XML tags.

7.Auto Rename Tag

image.png
Role: Automatically rename pairs of HTML/XML tags

8.Git History

image.png
Function: Generally, it is to look at the submitter of the file, modification time, date, commit information, etc.

9.Bracket Pair Colorizer

image.png
Function: Add different colors to the brackets to distinguish different blocks. Users can define different bracket types and different colors.
In fact, the main purpose is to see which level the div is

10.JavaScript(ES6) code snippets

image.png
Function: ES6 syntax intelligent prompt, and fast input, not only supports .js, but also supports .ts, .jsx, .tsx, .html, .vue, saves the time of configuring it to support various js code files

11.Live Server

image.png
Function: It is used to use a service container to serve a certain static file [similar to opening a static resource server]. In other words, Live Server is a small server with real-time loading function. Using it for web page development is like Same as modifying the page on the server. At the same time, because it has a real-time loading function, the page will be refreshed in real time after the code is modified, and the modification effect of the web page can be seen intuitively.
The main thing is hot update. In fact, if you develop it with vue scaffolding or react scaffolding, you basically don’t need it

12.Vue VSCode Snippets
image.png
vue2, vue3 syntax prompts, you can customize syntax fragments

Summary:
In fact, that’s all I can think of for the time being, and if it’s not enough, I can add it myself, but there’s no need to do so many bells and whistles, mainly for rapid development.

Guess you like

Origin blog.csdn.net/weixin_43239880/article/details/130289001