30 super practical VSCode plugins that greatly improve development efficiency

Visual Studio Code plug-ins are very important for improving programming efficiency and speeding up work. Here are the 30 most popular VSCode plugins, which will make you a more efficient master of moving bricks and fish. These plug-ins are mainly suitable for front-end developers, but there are also some general plug-ins that can also be applied to any development environment. The following are the VSCode plugins that I will introduce:

Settings Sync

Settings Sync can save you a lot of time to install plug-ins across devices

Before starting to install the plug-in, it is best to know the Settings Sync . It allows you to sync almost everything customized on VSCode to Github, from settings to keyboard shortcuts to other VSCode plugins.

In this way, you can access your favorite IDE from any device you want, instead of having to do it on a new device.
For programming in the VSCode environment, there is no need to manually set everything again.

Live Server

See the code changes reflected in the browser now

This is one of my favorite plugins. Live Server starts the local development server and provides real-time reloading function for static and dynamic pages.

Every time you save the code, you will immediately see the changes reflected in the browser. You will find errors faster, and it will be easier to perform some quick experiments on your code.

Tabnine

Tabnine is a popular VSCode artificial intelligence assistant that works in all major programming languages, so there is no doubt that you will find it useful no matter your skills.

By studying the publicly shared code base, Tabnine uses deep learning algorithms to predict your needs and provides one-click code completion functions, allowing you to complete projects quickly and efficiently. For novice coders, this makes learning a breeze, because it gives you space to play your ideas without having to remember coding syntax or search StackOverflow.

Moreover, if you are an experienced developer, then you will find that Tabnine provides you with the building blocks you need to run, thus saving a lot of time for your work.

Remote SSH

Use any remote machine with SSH server, the SSH plug-in allows you to use any remote computer and SSH server as a development environment. This makes it easier to develop and or troubleshoot in various scenarios.

You also don't need any source code on the local machine, because the plugin runs commands and other plugins directly on the remote machine.

Prettier

Spend less time formatting code

Prettier is a self-righteous code formatter. If you have multiple people working on a project, it will be especially effective because the plugin enforces a consistent style.

You can set it to format your code every time you save it, thereby significantly reducing the time you spend formatting the code.

Bracket Pair Colorizer

Everyone likes to color code. Bracket Pair Colorizer provides left and right parentheses with matching colors, making it easier to know which parentheses belong to whom.

You can also configure custom bracket characters, and you can also add a background color to the active range.

Auto Rename Tag

Automatically rename tags. Although VSCode inherently highlights the matching tags and adds the ending tag as soon as you type the opening tag, the auto-rename tag plugin will automatically rename the tags you change.

The plug-in is suitable for HTML, XML, PHP and JavaScript, no need to change the tag name twice.

GitLens

Enhance your Git capabilities GitLens enhances Git features of Visual Studio Code. This is a powerful plugin that allows you to see who, why and how the line of code changes over time, as well as many other features.

GitLens is a highly customizable plugin. If you don’t like a particular setting, you can easily turn it off in the settings.

Git History

Obtain the git log and display beautiful visual effects

Similar to GitLens, Git History is a VSCode plugin that provides visualization of git logs. You don't need to view git log in the terminal.

The plug-in is also very comprehensive. It allows you to compare branches, commits and files across commits. You can also check the Github avatar, which is pretty neat.

Vue 3 Support - All In One

This is a VSCode plugin that provides code snippets, syntax highlighting and formatting in Vue 2 or Vue 3 development, which can greatly improve your development efficiency. You can turn on the Auto Format Vue switch in the lower right corner of the bottom bar of the VSCode editor. It may help you automatically format the vue file format when the code is saved. The default is closed.

If you don't want to format the vue file automatically, you can also right-click the vue file and select the Format Document menu item in the menu bar that appears, and the file will be formatted once.

CSS Peek

Plug-in your HTML file to view your CSS code

This plugin is invaluable for front-end developers. Inspired by similar features in IDE Brackets, CSS Peek allows you to plug-in HTML and ejs files to display CSS/SCSS/LESS code in the source code.

If you know the class or ID name, it also allows you to quickly jump to the location of the corresponding CSS code.

Javascript Code Snippets

Provides a lot of JS code block tips. Although VSCode includes built-in JS IntelliSense, the JS code snippet plug-in enhances this experience by adding a large number of import and export triggers, class helpers and method triggers.

The plugin supports JS, TypeScript, JS React, TS React, HTML and Vue. In the VSCode Marketplace, you can also easily obtain code snippets in other styles (such as Angular).

HTML/CSS/JavaScript Snippets

Just enter the prefix name, and the complete code snippet will be completed automatically.

Search/Translate Hero - Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine

A VSCode plugin that allows you to search or translate in the code. You can select the corresponding keyword in the code in the editor, then click the right mouse button, and select the Search Online menu item in the menu panel that appears. The plug-in will automatically open the default browser for you and search for the corresponding keyword and display search results.

You can also select the corresponding keyword and use the shortcut key to open the browser to search.

Peacock

It is very practical to change the color of VSCode instance. Peacock allows you to change the color of the Visual Studio Code environment, so you can quickly identify the instance you just switched to.

Colorize

Check the colors you use in the style guide, use Colorize immediately visualize the CSS colors in the CSS/SASS/Less/... file. This makes it very easy to see at a glance which colors you use where.

Code Spell Checker

Let your code no longer have spelling errors. Although spelling errors are not a fatal problem, I prefer my code to have no spelling errors. code spelling checker plug-in underlines the unrecognized words in its dictionary file.

The plug-in is available in many different languages and supports jargon such as medical terminology.

Debugger For Chrome

Debug your JS code in VSCode. The Debugger for Chrome developed by Microsoft allows you to debug your JS code in VSCode. Contrary to debuggers in other IDEs, it is very smooth.

You can set breakpoints, execute code step by step, debug dynamically added scripts, and more.

Icon Fonts

Provide various icons for you to use! Icon Fonts provides fragments of various icon fonts, including the popular Font Awesome v5 icon pack.

For those who do not use VSCode, this package can also be used for Atom and Sublime Text.

Turbo Console Log

Automatically create a meaningful log message, the console displays the log \The plug-in automatically creates a meaningful log message process. It makes debugging easier because you will have some useful console output to find out where the problem is.

Todo Highlight

Immediately discover the TODO in the code, many programmers are used to writing TODO in the code, and then completely forget them. Todo Highlight makes them more prominent.

You can switch the highlighting, or you can list all the highlighted comments and display them from the corresponding file.

VSCode Icons

Wait, don't everyone like icons? You wouldn't think the icons are very different, but they do have at least for me. VSCode Icons adds a touch of color and cute little icons to your IDE. I have fallen in love with it.

Regex Previewer

Creating a preview of regular expressions, regular expressions can be a very difficult problem. Regex Previewer provides you with auxiliary documents that match your regular expressions.

The plug-in provides multiple examples for matching, so it becomes easier to quickly and accurately write regular expressions for various use cases.

Bookmarks

Add bookmarks to your code. Although VSCode has line numbers, Bookmarks allows you to add bookmarks to your code, helping you quickly navigate and jump back and forth easily.

Import Cost

When you develop a web application or website, it is easy to make something bloated-especially as a novice developer. An important factor in this is that many developers do not always know how big the package is when importing through code.

Import Cost is a VSCode extension that can display the size of the imported package inline, so you can know exactly how much it costs to import the package during the development process. Therefore, it will help you to better optimize your applications and websites, especially for mobile users who usually suffer more pain due to bloat.

Quokka

If your language of choice is JavaScript or TypeScript, then you will love Quokka.js. This extension is designed to speed up development by displaying runtime values in the IDE while writing code, so you can focus on writing code instead of building custom configurations just to try new things.

This is a simple, lightweight extension, very suitable for experienced developers and novices. It is also free for the community to use, but if you are a JavaScript/TypeScript expert, you can also purchase a Pro license, allowing you to modify the runtime value without changing the code.

ESLint

If you need formatter and canonical code, then this plugin is for you.
It can automatically format your code and find errors in the code.

In addition, it allows you to select a code area between bookmark codes, which is very useful for log file analysis, etc.

Visual Studio IntelliCode

It is designed to help developers and programmers provide smart code completion suggestions.
It supports Python, TypeScript/JavaScript, React and Java by default.

SQLTools — Database tools

A tool to manage the database through VSCode.
It supports many drivers, and you can use it to do many things, such as connecting to the resource manager, querying running programs, IntelliSense, bookmarks, and querying history.

Better Comments

The Better Comments extension will help you create more user-friendly comments in your code.
Each color can be used as a way to indicate the type of comment (note, to-do, etc.).

finally

Here are 30 VSCode plugins that I personally introduce, which can improve your programming efficiency without affecting the quality. , If the articles and notes can bring you a hint of help or inspiration, please don’t be stingy with your likes and favorites, the articles are continuously updated synchronously, and past articles are also included in https://github.com/Wscats/CV
Welcome your attention and communication, yours is definitely my biggest motivation to move forward😁