Our VSC (VSCode) will be like a unicorn with five lasers that can emit lasers! Next, I will introduce the very useful plugins I use every day.

If you are still a newcomer to VSC, click on the button at the bottom left to install the plugin.

VSCode: How to Install plugin

VSCode: How to Install plugin

Material Theme

Downloads: 1.3 million

The longest theme of Visual Studio Code!

VSCode plugin:Material Theme

VSCode plugin:Material Theme

Auto Import

Downloads: 460,000

Automatically find, analyze, and then provide code completion. Available for TypeScript and TSX.

VSCode plugin:Auto Import 2

VSCode plugin:Auto Import 2

Import Cost

Downloads: 410,000

The plugin will display the size of the imported package at the end of the line. To calculate the packet size, the plugin uses Webpack and babili-webpack-plugin.

VSCode Plugin:Import Cost

VSCode Plugin:Import Cost

Indent-Rainbow

Downloads: 130,000

A simple plugin makes alignment more readable.

VSCode Plugin:Indent-Rainbow

VSCode Plugin:Indent-Rainbow

IntelliSense for CSS class names in HTML

Downloads: 2.43 million

Based on your project and linkexternal files referenced by tags, the smart plugin provides completion of the CSS class name in HTML.

VSCode Plugin:IntelliSense for CSS class names in HTML

VSCode Plugin:IntelliSense for CSS class names in HTML

SVG Viewer

Downloads: 290,000

A plugin for previewing SVG.

VSCode plugin:SVG Viewer

VSCode plugin:SVG Viewer

Prettier

Downloads: 357 million

You must not have this plugin missing, you need it to beautify your JavaScript/TypeScript/CSS code with one click.

 

VSCode plugin:Prettier

VSCode plugin:Prettier

React Native Tools

Downloads: 2.18 million

Code hints, debugging, commands to integrate RN.

 

VSCode plugin:React Native Tools

VSCode plugin:React Native Tools

Sublime Text Keymap and Settings Importer

Downloads: 760,000

From the download volume, it seems that many people have moved from Sublime Text.

 

VSCode plugin:Sublime Text Keymap and Settings Importer

VSCode plugin:Sublime Text Keymap and Settings Importer

This plugin changes the shortcut key binding of visual studio code to be the same as Sublime Text 3. You can try it: cmd + P (Mac), ctrl + P (Windows).

 

VSCode plugin:Sublime Text Keymap and Settings Importer 2

VSCode plugin:Sublime Text Keymap and Settings Importer 2

You can jump to the file. If you add >symbols before searching , you can even search for actions, such as opening a built-in terminal, installing plugins, and more.

For those who are used to using ST3, this is a big plus.

npm Intellisense

Downloads: 880,000

The VSCode plugin can automatically complete the npm module name in the import statement.

 

VSCode plugin:npm Intellisense

VSCode plugin:npm Intellisense

lit-html

Downloads: 30,000

In JavaScript/TypeScript files, if HTML tags are used, lit-html provides syntax highlighting and corresponding completion support.

 

VSCode plugin:lit-html

VSCode plugin:lit-html

highlight-matching-tag

Downloads: 60,000

This should have been a feature that VSCode should provide by default, highlighting the matching tags.

 

VSCode plugin:highlight-matching-tag

VSCode plugin:highlight-matching-tag

GitLens

Downloads: 7.72 million

Don’t say anything, just directly on the map!

 

VSCode plugin:GitLens

VSCode plugin:GitLens

Git Project Manager

Downloads: 370,000

Git Project Manager allows you to search and open a Git-managed project directly with one click.

 

VSCode plugin:Git Project Manager

VSCode plugin:Git Project Manager

Git History

Downloads: 3.32 million

Used to view the git history of a git log or a file, compare different branches, commits.

VSCode plugin:Git History

VSCode plugin:Git History

File Utils

Downloads: 80,000

Provides a more concise way to create, copy, move, rename, and delete files/folders.

 

VSCode plugin:File Utils

VSCode plugin:File Utils

Bracket Pair Colorizer

Downloads: 2.28 million

If your code has a lot of callbacks, this highlighting can help you better distinguish between different code blocks.

VSCode plugin:Bracket Pair Colorizer

VSCode plugin:Bracket Pair Colorizer

Color Highlight

Downloads: 250,000

Visually show the colors you define.

VSCode plugin:Color Highlight

VSCode plugin:Color Highlight

CSS Peek

Downloads: 230,000

You can locate its definition in the HTML by CSS id or class.

 

VSCode plugin:CSS Peek

VSCode plugin:CSS Peek

Debugger for Chrome

Downloads: 11.11 million

Use Chrome to debug your JavaScript code, or other platforms that support the Chrome Debugger protocol.

VSCode plugin:Debugger for Chrome

VSCode plugin:Debugger for Chrome

Quokka.js

Downloads: 1.72 million

Execute JavaScript code in real time (useful for making quick demos).

VSCode plugin:Quokka.js

VSCode plugin:Quokka.js

Trailing Spaces

Downloads: 70,000

Highlight those redundant spaces and quickly delete them.

VSCode plugin:Trailing Spaces

VSCode plugin:Trailing Spaces

TypeScript Hero

Downloads: 720,000

Help with children’s shoes programmed with TypeScript!

 

VSCode plugin:TypeScript Hero

VSCode plugin:TypeScript Hero

Time

Downloads: 240,000

Generate data reports from your usage habits.

VSCode plugin:Time

VSCode plugin:Time

winter

Downloads: 4.51 million

Vue tool under VS Code! With the development of Pine Wu, it has accumulated more than 4 million downloads!

VSCode plugin:winter

VSCode plugin:winter

Code Runner

Downloads: 3.46 million

Support for immediate execution of code in multiple languages. Supported languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey , AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D.

VSCode plugin:Code Runner

VSCode plugin:Code Runner

PHP IntelliSense

Downloads: 4.15 million

VSCode plugin:PHP IntelliSense

VSCode plugin:PHP IntelliSense

vscode-icons

Downloads: 7.99 million

Icon collection.

VSCode plugin:vscode-icons

VSCode plugin:vscode-icons

Is

Downloads: 290,000

Feel free to use Facebook’s Jest.

 

VSCode plugin:Is

VSCode plugin:Is

React.js code snippets

Downloads: 590,000

It is very convenient to develop the React.js application with the ES6 syntax.

VSCode plugin:React.js code snippets

VSCode plugin:React.js code snippets

 

other vscode plugins introduction:

VScode easy to use plugin collection

how do efficient developers personalize vscode plugins andconfigurations?