The most complete and practical plug-in for VSCode (VIP Collection Edition)

content

1. Necessary plug-ins

Chinese

Settings Sync (configuration sync to the cloud)

​ wakatime (programming time and behavior tracking statistics)

Second, the artifact of efficiency

HTML Snippets (code hints)

Auto Close Tag

Bracket Pair Colorizer (brackets for color distinction)

Browser Preview (open the browser in VSCode)

REST Client (interface debugging)

CSS Peek (css style viewer)

Partial Diff (file comparison)

Npm Intellisense

open in browser

Path Intellisense (quick import files)

Image preview

3. Git integration

GitHub Pull requests

Git Graph

GitLens

GitHistory

4. Beautification

GitHub Theme

vscode-icons

Beautify

Winter

Better Align

Better Comments

5. Code Specification

change-case

JavaScript Booster

JavaScript (ES6) code snippets

ESlint

TSLint

Code Spell Checker

koroFileHeader

Six, install X artifact

Markdown All in One

vscode-drawio

Polacode-2020

Live Share

---

1. Necessary plug-ins

Chinese

After installation, press the shortcut key Ctrl+Shift+P, enter

configure language

Settings Sync (configuration sync to the cloud)

We can synchronize our vscode configuration to the cloud. When we change computers or install vscode again, we 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

Second, the artifact of efficiency

HTML Snippets (code hints)

HTML code snippets, the plugin can provide you with code hints for html tags, no need to type angle brackets

Auto Close Tag

Auto-close HTML/XML tags

Bracket Pair Colorizer (brackets for color distinction)

Brackets for color distinction

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

Browser Preview (open the browser in VSCode)

You can open the browser in vscode and view it while coding

REST Client (interface debugging)

Interface debugging can be performed in vscode, providing rich api configuration methods, so that we can call interface debugging at any time without leaving the editor

Create a new .http file, write down the basic test code, click Send Request to view the interface return results in the right window, very nice

CSS Peek (css style viewer)

css style viewer

Partial Diff (file comparison)

file comparison

Npm Intellisense

Autocomplete npm modules in import statements

open in browser

Quickly open html files to browser preview

Path Intellisense (quick import files)

Automatically prompt file path, support various fast import files

Image preview

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

3. Git integration

GitHub Pull requests

View and manage GitHub pull requests and issues in Visual Studio Code

Git Graph

Git graphical display and manipulation

GitLens

GitLens can help you understand your code better. Quickly see objects that change a line or block of code

GitHistory

GitHistory can view and search git logs as well as graphs and details, and also supports operations such as branch comparison, branch management, etc.

4. Beautification

GitHub Theme

Black and white skins

vscode-icons

Provides a very beautiful directory tree icon theme

Beautify

Right-click on the code file to format html, js, css

Winter

The official Vue plugin for VScode is a must for Vue developers. Contains syntax highlighting, smart prompts, emmet, error prompts, formatting, auto-completion, debugger and other useful functions

Code style specification plugin

Better Align

Code layout elegantly

Select the code with the key combination [Ctrl+Shift+p] and enter Align

Better Comments

Rich annotation colors

Custom style, need to write configuration code

配置代码
"better-comments.tags": [ {"tag": "*","color": "#98C379","strikethrough": false,"backgroundColor": "transparent" }]
使用// * 绿色的高亮注释复制代码TODO Tree

5. Code Specification

change-case

variable naming convention

JavaScript Booster

The corresponding unreasonable reasons and improvement plans will be prompted

JavaScript (ES6) code snippets

ES6 syntax intellisense, and quick typing

ESlint

Standardize js code writing rules, if you think it is too strict, you can customize the rules

TSLint

The writing specification of ts, this plugin is a series, and also provides TSLint (deprecated), TSLint Vue, TSLint Vue-TSX

Code Spell Checker

is a spell checker that checks for uncommon words and gives a warning if a word is misspelled

koroFileHeader

The plugin used to generate file header comments and function comments in vscode. After multiple iterations, the plugin: supports all mainstream languages, has powerful functions, is flexible and convenient, has complete documentation, and is easy to eat!

Not only that, but also generate some particularly interesting annotations, such as this fire-breathing dragon...

Six, install X artifact

Markdown All in One

You can write Markdown happily in vscode, with powerful functions. Rich shortcut keys, read while writing, easily convert to html or pdf file

vscode-drawio

You can draw a flowchart happily in vscode, create a new .drawio suffix file and drag it into vscode

Polacode-2020

We can convert our code into a full-fledged picture

Live Share

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

Useful, please like and develop good habits!

If you have any questions, please leave a message!