Vscode most complete practical plug-in (VIP collection version)

Catalog

One 、 Essential plug-ins

Chinese（ chinese ）

Settings Sync（ Configure synchronization to the cloud ）

​wakatime（ Programming time and behavior tracking statistics ）

Two 、 Efficiency artifact

HTML Snippets（ Code hinting ）

Auto Close Tag（ Auto close tag ）

Bracket Pair Colorizer（ Brackets for color discrimination ）

Browser Preview（VSCode Open the browser inside ）

REST Client（ Interface debugging ）

CSS Peek（css Style viewer ）

Partial Diff（ The file is ）

Npm Intellisense（ Automatically complete the... In the import statement npm modular ）

open in browser（ fast open html File to browser preview ）

Path Intellisense（ Quickly import files ）

Image preview（ The preview image ）

3、 ... and 、Git Integrate

GitHub Pull requests（  View and manage GitHub Pull requests and questions ）

Git Graph（Git Graphical display and operation ）

GitLens（ Quickly view objects that change lines or blocks of code ）

GitHistory（ You can view and search git Logs and graphics and details ）

Four 、 beautify

GitHub Theme（） Black and white skin GitHub Theme（）

vscode-icons（ Beautiful theme tree icon ）

Beautify（ Right click and one click format ）

Vetur（ It's official Vue plug-in unit ）

Better Align（ Elegant code layout ）

Better Comments（ Rich annotation colors ）

5、 ... and 、 Code specification

change-case（ Variable naming conventions ）

JavaScript Booster（ Code improvements ）

JavaScript (ES6) code snippets（ Intelligent prompt and quick input ）

ESlint（ Rigorous standard writing ）

TSLint（ Writing norms ）

Code Spell Checker（ Spell checker ）

koroFileHeader（ Generate file header comments and function comments ）

6、 ... and 、 loading X Artifact

Markdown All in One（ Writing Markdown）

vscode-drawio（ Draw flow chart ）

Polacode-2020（ Turn it into a full picture ）

Live Share（ Collaborative editing and debugging with others in real time ）

---

One 、 Essential plug-ins

Chinese（ chinese ）

After installation , Press shortcut key Ctrl+Shift+P, Input

configure language

Settings Sync（ Configure synchronization to the cloud ）

We can make our vscode Configure synchronization to the cloud , When we change computers or install again vscode When , You only need to log in to the account to synchronize the configuration

wakatime（ Programming time and behavior tracking statistics ）

  Programming time and behavior tracking statistics

Two 、 Efficiency artifact

HTML Snippets（ Code hinting ）

HTML code snippet , The plug-in can provide you with html Code tips for tags , No need to type angle brackets

Auto Close Tag（ Auto close tag ）

Auto close HTML/XML label

Bracket Pair Colorizer（ Brackets for color discrimination ）

Brackets for color discrimination

"workbench.colorCustomizations": {"editorIndentGuide.activeBackground": "#00ffea"}

Browser Preview（VSCode Open the browser inside ）

Can be in vscode Open the browser inside , View while coding

REST Client（ Interface debugging ）

Can be in vscode Interface debugging inside , Provide a wealth of api Configuration mode , Let's call interface debugging at any time without leaving the editor

Create a new one .http file , Write down the basic test code , Click on Send Request You can view the returned results of the interface in the right window , very nice

 

CSS Peek（css Style viewer ）

Partial Diff（ The file is ）

The file is

Npm Intellisense（ Automatically complete the... In the import statement npm modular ）

It can automatically complete the... In the import statement npm modular

open in browser（ fast open html File to browser preview ）

fast open html File to browser preview

Path Intellisense（ Quickly import files ）

Auto prompt file path , Support various quick import files

Image preview（ The preview image ）

Hover the mouse over the link to preview the picture in time

3、 ... and 、Git Integrate

GitHub Pull requests（  View and manage GitHub Pull requests and questions ）

stay Visual Studio Code View and manage GitHub Pull requests and questions

Git Graph（Git Graphical display and operation ）

 

GitLens（ Quickly view objects that change lines or blocks of code ）

GitLens Can help you better understand the code . Quickly view objects that change lines or blocks of code

GitHistory（ You can view and search git Logs and graphics and details ）

GitHistory You can view and search git Logs and graphics and details , It also supports branch comparison , Branch management and other operations

Four 、 beautify

GitHub Theme（ Black and white skin ）

vscode-icons（ Beautiful theme tree icon ）

Provides a very beautiful directory tree icon theme

Beautify（ Right click and one click format ）

Right click on the code file and format it with one click html,js,css

Vetur（ It's official Vue plug-in unit ）

VScode It's official Vue plug-in unit ,Vue It's a must for developers . Include syntax highlighting , Smart tips ,emmet, Error message , format , Automatic completion ,debugger And other practical functions

Code style specification class plug-in

Better Align（ Elegant code layout ）

Elegant code layout

Check the code with the key combination [Ctrl+Shift+p], Input Align that will do

Better Comments（ Rich annotation colors ）

Rich annotation colors

Custom style , The configuration code needs to be written

 Configuration code 
"better-comments.tags": [ {"tag": "*","color": "#98C379","strikethrough": false,"backgroundColor": "transparent" }]
 Use // *  The green highlighted comment copies the code TODO Tree

5、 ... and 、 Code specification

change-case（ Variable naming conventions ）

Variable naming conventions

JavaScript Booster（ Code improvements ）

The corresponding unreasonable reasons and improvement schemes will be prompted

JavaScript (ES6) code snippets（ Intelligent prompt and quick input ）

ES6 Syntax intelligence tips , And fast input

ESlint（ Rigorous standard writing ）

standard js Code writing rules , If you think it's too rigorous , Rules can be customized

TSLint（ Writing norms ）

ts The writing standard of , This plug-in is a series , It also provides TSLint (deprecated),TSLint Vue,TSLint Vue-TSX

Code Spell Checker（ Spell checker ）

It's a spell checker , Check for unusual words , If a word is misspelled , There will be a warning

koroFileHeader（ Generate file header comments and function comments ）

stay vscode Plug in for generating file header comments and function comments in , After several iterations , plug-in unit ： Support all major languages , Powerful , Flexible and convenient , The documentation is complete , Simple to eat ！

Not only that , It can also generate some particularly interesting comments , For example, this fire spray Dragon ...

6、 ... and 、 loading X Artifact

Markdown All in One（ Writing Markdown）

Can be in vscode Happy writing inside Markdown, Powerful . Rich shortcuts , Read while writing , Easily convert to html or pdf file

vscode-drawio（ Draw flow chart ）

Can be in vscode Draw a happy flow chart inside , newly build .drawio Suffix file and drag it into vscode in

Polacode-2020（ Turn it into a full picture ）

We can turn our code into a full picture

Live Share（ Collaborative editing and debugging with others in real time ）

This artifact enables you to edit and debug collaboratively with others in real time

Please like it , Form good habits ！

Please leave a message if you have any questions ！