Recommend twenty-seven useful plug-ins for vscode, install them together!

This article will introduce you to useful plug-ins in vscode. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Python

Provides many basic functions such as code analysis, highlighting, standardization, etc.

Recommend twenty-seven useful plug-ins for vscode, install them together!

Various beautiful icons

Click here to set the icon

Then select Recommend twenty-seven useful plug-ins for vscode, install them together!

Recommend twenty-seven useful plug-ins for vscode, install them together!

Plug-in that displays the file size in the lower left corner

##Bracket Pair Colorizer

Paired color brackets

Settings Sync

can synchronize VS Code settings to the GitHub account, including setting files and plug-in settings, etc., re- When configuring VS Code, you only need to synchronize it. After the installation is complete, you only need to add a Github token. After adding it, configure the rest according to your personal preferences, and other plug-ins will automatically complete it for you.

What needs to be mentioned here is that many irresponsible blog posts say that when selecting token permissions, they allow all to be selected, which is actually a very dangerous behavior. I felt something was strange at first, because there were many plug-ins to install, and I didn’t look into it too carefully. It wasn’t until I needed to synchronize the VS Code settings on another computer that I clicked on the official website of Setting Sync and found out. , where so many permissions are needed, only one permission is needed. As shown below

Atom-Material

An Android-style color theme, it is recommended to use the recommended font settings.

"editor.fontSize": 16, "editor.fontWeight": "400", "editor.lineHeight": 24, "editor.letterSpacing": 0.5

Display effect of recommended settings

Path Autocomplete

Automatically sense the files in the directory and select it yourself.

Note: VSCode itself also supports path awareness. You need to configure it to use the one that comes with the system or use this plug-in. Otherwise, there will be two copies of the entries under each path.

8. Import Cost

Display the size of the imported package at the end of the line

This seems to only support JavaScript.

Recommend twenty-seven useful plug-ins for vscode, install them together!

Colored indent

Indent effect

Recommend twenty-seven useful plug-ins for vscode, install them together!

can display the author and submission time of each line of code.

Effect

Git history

Git history

Color Highlight

Visual display of colors defined in css/web

Quokka.js

Real-time execution JavaScript code (useful for quick demos)

Code Runner

Run the code immediately

Recommend twenty-seven useful plug-ins for vscode, install them together!

Vue tool plug-in

Live server

Real-time display of web page conditions

Python indent

Automatically correct Python Indent

Recommend twenty-seven useful plug-ins for vscode, install them together!

Header comment add/update plugin

##TODO Highlight

Highlight the TODO items in the notes, it is recommended to use the 19th plug-in, Todo Tree use

Todo Tree

Click left The logo of the "tree" in the sidebar displays TODOList entries. Click on the corresponding entry to open the file and locate the TODO line.

Auto Close Tag

Plug-in to automatically write closing tags

Auto Rename Tag

Automatically rename closed tags

##Recommend twenty-seven useful plug-ins for vscode, install them together!

Code snippet generates images

Recommend twenty-seven useful plug-ins for vscode, install them together!

is a better reference line than the one that comes with VS Code, and can be customized

## Color Info

Displays the color in css Attribute information

Regex Previewer

Regular result preview plug-in

Mithril Emmet

Note: In fact, vscode has a built-in Emmet plug-in

A plug-in for writing HTML and CSS codes efficiently, which can quickly input most content

For example, when editing HTML files , enter tr*2>td*3, and press Enter to quickly generate a table label with two rows and three columns.

Recommended study: "vscode tutorial

"

The above is the detailed content of Recommend twenty-seven useful plug-ins for vscode, install them together!. For more information, please follow other related articles on the PHP Chinese website!