60 Amazing VS Code Plugins You Should Try

Click the "Xiaobai Learns Vision" above, choose to add "Star" or "Top".
Heavy content delivered to you first.

This article does not compare any editors; it simply shares my personal experience using vscode for development. I enjoy tinkering with vscode and often seek fun plugins, which has led to a growing collection. Today, I recommend over 60 plugins that I have saved. It is said that having too many plugins can slow down the editor, but my computer seems to handle it well so far.

Next, I will categorize the plugins into several sections: Appearance Optimization, Function Extensions, Efficiency Improvement, Code Formatting, and Other Plugins.

Note: This article only covers the basic usage of the plugins, which means it will let you know that such plugins exist and give you a general idea of what they can do. Some plugins have complex configurations, so those who need them can do their own research. Depending on each person’s computer, vscode configuration, and the plugins, some plugins may not work on your computer. The shortcuts mentioned in the article are for windows; please check for other operating systems.

A good horse deserves a good saddle. A nice editor appearance can enhance a programmer’s coding experience, improve developers’ moods, and make writing bugs more motivating.

Better Comments

A plugin that beautifies comments, displaying different colors based on the type of comment for clarity.

After installation, the plugin comes with default comment colors, and you can customize any color and type of comment through the vscode configuration file. I’ve found the specific configuration method for you.

Bracket Pair Colorizer / Bracket Pair Colorizer 2

This is a plugin for finding matching brackets (not for finding partners!). There are currently two versions; Bracket Pair Colorizer 2 is the enhanced version, but I haven’t delved into the specifics of its enhancements. It has many settings, but the default configuration after installation is sufficient; interested users can discover more fun features on their own.

You can see that paired brackets are the same color, and when I select one bracket, a line appears to help you find its matching bracket.

Highlight Matching Tag

This is also a plugin for finding matching tags. In the demo image of the previous plugin, when I click on an html tag, the matching tag will be underlined to indicate which tags are pairs.

Chinese

This plugin turns your vscode into Chinese. It is useful for those who are not proficient in English, while experts can skip it. I placed it under appearance optimization because I think Chinese looks better than English 🧐🧐. Just install it and restart.

Color Highlight

As the name suggests, this plugin highlights colors in our code. You can see in the image below how I set the css color properties, which are visually displayed.

Community Material Theme / Material Theme

This plugin modifies the editor’s theme, which includes many built-in options. I use the Material Theme Palenight High Contrast. After installation, just click on Set Color Theme to apply.

Material Theme Icons

This plugin sets file icons. There are many other plugins for modifying file icons, so if you don’t like this one, feel free to explore others.

Error Gutters

Errors are highlighted with big red wavy lines, making them very noticeable.

Image preview

Preview images referenced in the code; hovering over them will display a small window with the image.

indent-rainbow

As the name suggests, this plugin shows different colors for different levels of indentation.

Indenticator

When you click on an indented section, a white line will appear to indicate your current indentation level, making it easier to view the code structure.

Trailing Spaces

This plugin displays trailing spaces.

VSCode Great Icons

This is another plugin for modifying file icons. I prefer this one over Material Theme Icons for its style; everyone has their preferences.

The editor’s built-in features are limited, so to handle daily development, many other tools must be installed for assistance. However, plugins can also introduce commonly used auxiliary software. Their features may not be as powerful as the native ones, but they are generally sufficient and very convenient.

AZ AL Dev Tools/AL Code Outline

This plugin helps organize code structure. After installation, an option for AL OUTLINE will appear in the file icon.

To demonstrate, I found a longer, typical vue file. Please ignore my code content and focus on the plugin’s functionality 🤣🤣. You can see that the first layer expands with the characteristic template, script, and style of a vue single-file component. Expanding layer by layer reveals dom nodes, functions defined in methods, etc. You can click to quickly locate the target position, so my mom doesn’t have to worry about my global searches anymore!

Note: It seems that the contents are expanded by default, and there should be a setting to control whether to expand by default, but I haven’t researched it. Interested experts can investigate further.

Code Runner

This plugin allows you to run code and view results in the editor. Frontend developers can check console.log in the console, and there are many other features. For specific usage, refer to this article.

CodeIf

I saw a saying online: In computer science, there are only two hard things: cache invalidation and naming. Haha, it’s true. Naming has always been a painful task when developing projects.

However, naming is a very important part of the development process. A good function name can instantly convey its functionality. Therefore, whenever I encounter a need to name a variable, function, or class during development, I ponder and translate various options.

But the emergence of CodeIf solves this problem. It searches GitHub, Bitbucket, and GitLab to find commonly used variable names and provides you with frequently used vocabulary.

To use it, simply select the variable name, then right-click and choose CodeIf to jump to the webpage displaying candidate names.

Color Info

This plugin displays detailed color information, showing color values such as rgb, hsl, cmyk, hex, etc. You can add the types of information to display in the configuration.

Code Spell Checker

This plugin checks the spelling of words in the code. When a word is incorrect, a wavy line appears below it as a warning. You can also customize the dictionary and ignore certain words. For more usage, refer to the link below.

Debugger for Chrome

This plugin is specifically designed for frontend debugging and is very convenient for debugging. It offers the same functionalities as the Google console, allowing you to perform breakpoint debugging without opening the browser’s console. There are also corresponding plugins like Debugger for Firefox and Debugger for Microsoft Edge. I haven’t used the others, so install them as needed; their usage should be similar.

After installation, a small debug icon will appear on the left. Open it and click the small gear icon above to configure. A .vscode folder and a launch.json file will be automatically created in the root directory, which you can ignore.

For more details on the configuration file and its usage, refer to this detailed article.

Git History

Right-click on a file and select Git: View File History to view all commit records in a list.

GitLens — Git Supercharged

This is another plugin related to git, and it has more powerful features than the previous one. In the demonstration image of the previous plugin, you can see that each line of my code has the record of the last git commit, which is the work of this plugin.

There are many other operations available; refer to the link below for details.

LeetCode

You can solve algorithm problems directly in vscode. I haven’t used it myself 😣😣.

Local History

This plugin is powerful as it keeps a local record of code modifications. Typically, when we write incorrect code, we can undo it, but once we undo and modify again, it becomes difficult to cancel the undo. With this plugin, you can directly view the modification records. You can also compare with the current version; it’s a magical tool.

After installation, a .history folder will be automatically created in the project root directory. The code modification records will be stored here. Remember to add it to .gitignore, or it will become troublesome every time you commit code.

open in browser

Open an html file in the browser.

After installation, right-click on the target html file and select open in default browser to open the file in the browser.

Partial Diff

For file comparison, the best tool is probably Beyond Compare, but it is paid software! Therefore, the Partial Diff plugin serves as a good alternative. Select a piece of code, right-click Select Text for Compare, select another piece of code, and right-click Compare Text with Previous Selection to compare. The Chinese version makes it even clearer 🤣🤣.

Postcode

Postman is a well-known tool, and this plugin can be understood as using postman within vscode.

After installation, a small box icon will appear on the left menu. Click it and then click Create Request to use it normally.

Project Manager

A project manager suitable for those who frequently switch projects. Although I don’t deal with many projects, I have quite a few personal projects. With this plugin, you no longer need to open a new window for each project.

After installation, a small folder icon will appear in the left list. Click it to manage your projects. Typically, you will operate the projects.json file, and clicking on the project name will allow you to switch or open it in a new window.

Quokka.js

This plugin displays the running results of your code in real-time. For usage, please follow the link.

To achieve ultimate coding efficiency, you should avoid manual input whenever possible. The following plugins assist with automation, saving you a lot of time for leisure activities.

Auto Import

Typescript auto-imports. Many plugins now have this feature built-in, making it no longer essential. Perhaps due to the various quirky plugins I have installed, I get a ton of prompts when I want to import something, and I can choose any of them 😂.

Auto Rename Tag

This plugin automatically modifies tag names. When you rename a start tag, it automatically renames the matching end tag.

It modifies all corresponding tags at once, which is quite nice.

change-case

This plugin quickly switches variable formats, including PascalCase, camelCase, snake_case, etc. It has many types. Use F1 (windows) and enter the corresponding command.

CSS Peek

You can quickly locate the definition of styles by clicking on class names. I don’t know if it’s just me, but sometimes it fails and requires me to click Disable and then Enable for it to work again. For specific usage, refer to the link.

ECMAScript Quotes Transformer

This plugin is used for transforming template strings and regular string concatenation. However, in my daily development, I mostly use template strings, so I rarely need this transformation.

Usage is simple: select the line you want to transform, press f1, and enter the command. Typing esq will bring up the prompt.

embrace

This plugin quickly adds various quotes and brackets around the selected code without having to move the cursor back and forth. However, most modern editors have this feature built-in 🤨🤨.

File Utils

This plugin provides convenient methods for creating, copying, moving, renaming, and deleting files and directories. The demonstration image is from the official website.

javascript console utils

Frontend developers often use console.log, and this plugin quickly generates console.log statements. It’s very simple to use: select a variable and press ctrl + shift + L to generate it. To delete, press ctrl + shift + D.

json2ts

This plugin automatically converts json format to ts types. After copying the json, press ctrl + alt + v to convert.

koroFileHeader

This plugin automatically adds header comments and function comments. Custom content needs to be configured in settings.json.

"fileheader.customMade": {
    "Author": "一尾流莺",
    "Description": "",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "FilePath": ""
  },
  
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  },

Mithril Emmet

This plugin quickly generates code structures, but it seems that the new version of vscode already has this feature built-in.

Path Intellisense

This plugin automatically completes paths when importing files.

Npm Intellisense

This plugin provides intelligent prompts when importing npm packages.

px to rem & rpx (cssrem)

This plugin automatically converts units.

It’s very simple; just press enter when prompted.

Turbo Console Log

This is another plugin for generating console.log statements. The difference is that it supports custom content for console.log, including file names, paths, sizes, etc., and you can add your favorite emoji icons. The shortcut is ctrl + alt + L.

Code Snippet Plugins

There are many plugins in this category, but their function is to provide code snippets. They allow you to type a few characters and generate entire code segments.

JavaScript (ES6) code snippets
Jest Snippets
HTML Snippets
Vue VSCode Snippets
Vue 3 Snippets
… …

Beautify

This plugin is used for code formatting, but I haven’t used it much since I primarily rely on eslint + prettier. If anyone is using it, please share your thoughts in the comments. Interested users can search for usage methods.

ESLint

This plugin checks code for compliance with coding standards. It will report errors or warnings for non-compliant code. The specific standards need to be configured in the .eslintrc.js file created in the root directory, and many large companies’ existing standards can be used. It gets quite complex, so I won’t go into detail, but here’s a tutorial link.

Prettier – Code Formatter

This plugin is for code formatting, typically used alongside eslint, but it can also be used alone.

Create a .prettierrc.json file in the root directory and write your desired formatting options. For more specific configuration details, check the link.

vetur / volar

For those developing with vue, dealing with these plugins is essential. volar is better suited for vue3 and offers more features. Due to the extensive functionalities of these two plugins, I won’t elaborate further; interested users can search for their usage.

In addition to functional plugins, there are also many fun plugins. Below are a few that may not greatly impact development but are very entertaining.

Xiao Ba Wang

Remember the controller games from childhood? The developers have created a plugin for us, but I must remind you: games come with risks; be cautious while slacking off!

The operation is very simple; after installation, a game controller icon will appear on the left. Click to download games and start playing.

Emoji

This plugin allows you to add emoji icons to your code. Personally, aside from writing comments and console.log, I find it mostly for fun; seeing various little emojis in your code may make others think you’re a cute person.

In its official example, it can even set emoji as variable names, which I wouldn’t recommend. The usage is very simple: press f1 (windows), enter emoji, and you will see three options: emoji, markdown‘s emoji, and unicode‘s emoji. Select a mode and press enter to access the list, then press enter again to input it into your code.

Settings Sync

This plugin syncs the configuration of vscode plugins. I haven't switched computers yet, so I haven't tested it, but it seems quite popular online.

Author: 一尾流莺

Link: https://juejin.cn/post/6994327298740600839


Download 1: OpenCV-Contrib Extension Module Chinese Version Tutorial

Reply "Extension Module Chinese Tutorial" in the backend of the "Xiaobai Learns Vision" public account to download the first OpenCV extension module tutorial in Chinese, covering installation of extension modules, SFM algorithms, stereo vision, target tracking, biological vision, super-resolution processing, and more than twenty chapters.

Download 2: Python Vision Practical Project 52 Lectures

Reply "Python Vision Practical Project" in the backend of the "Xiaobai Learns Vision" public account to download 31 vision practical projects, including image segmentation, mask detection, lane line detection, vehicle counting, eyeliner addition, license plate recognition, character recognition, emotion detection, text content extraction, and face recognition, to help quickly learn computer vision.

Download 3: OpenCV Practical Project 20 Lectures

Reply "OpenCV Practical Project 20 Lectures" in the backend of the "Xiaobai Learns Vision" public account to download 20 practical projects based on OpenCV for advanced learning of OpenCV.

Group Chat

Welcome to join the reader group of the public account to exchange ideas with peers. Currently, there are WeChat groups for SLAM, 3D vision, sensors, autonomous driving, computational photography, detection, segmentation, recognition, medical imaging, GAN, algorithm competitions, etc. (These will be gradually subdivided). Please scan the WeChat ID below to join the group, with the note: "Nickname + School/Company + Research Direction", for example: "Zhang San + Shanghai Jiao Tong University + Vision SLAM". Please follow the format; otherwise, you will not be approved. After successful addition, you will be invited to the relevant WeChat group based on your research direction. Please do not send advertisements in the group; otherwise, you will be removed. Thank you for your understanding~

Better Comments

Material Theme Icons

Code Runner

Git History

Auto Import

Leave a Comment Cancel reply