30 super practical VSCode plugins that greatly improve development efficiency

Plugins for Visual Studio Code are very important in improving programming efficiency and speeding up your work. Here are 30 of the most popular VSCode plugins that will make you a more efficient master of the game. These plugins are mainly for front-end developers, but there are some generic plugins that can also work with any development environment. Here are the VSCode plugins I'll cover:

Settings Sync

Settings Sync can save you a lot of time installing plugins across devices

Before you start installing plugins left and right, it is good to know the existence of Settings Sync . It allows you to sync almost everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode plugins.

This way, you can access your favorite IDE from any device you want, instead of having to switch from normal on a new device
program in the VSCode environment, and you don't have to manually set everything up again.

Live Server

Immediately see code changes reflected in your browser

This is one of my favorite plugins. Live Server Starts a local development server and provides live reloading for static and dynamic pages.

Every time you save your code, you'll immediately see the changes reflected in your browser. You'll find bugs faster, and it's easier to do some quick experiments with your code.

Tabnine

Tabnine is a wildly popular AI assistant for VSCode that works with all major programming languages, so no doubt you'll find it useful no matter your skill set.

By researching publicly shared codebases, Tabnine uses deep learning algorithms to predict your needs and provides one-click code completion so you can complete your projects quickly and efficiently. For novice coders, this makes learning a breeze because it gives you room to play with your ideas without having to memorize coding syntax or search StackOverflow.

And, if you're an experienced developer, you'll find that Tabnine saves you a lot of time by giving you the building blocks you need to run.

Remote SSH

Use any remote machine with an SSH server, the SSH plugin allows you to use any remote machine with an 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, since the plugin runs commands and other plugins directly on the remote machine.

Prettier

Spend less time formatting code

Prettier is an opinionated code formatter that works especially well if you have multiple people working on a project, as the plugin enforces consistent styles.

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

Bracket Pair Colorizer

Everyone loves to colorize code, Bracket Pair Colorizer provides matching colors for opening and closing brackets, making it easier to know which brackets belong to whom.

Custom bracket characters can also be configured, and you can also add a background color to the active range.

Auto Rename Tag

Automatically rename tags, while VSCode inherently highlights matching tags and adds closing tags as soon as you type a start tag, the Auto Rename Tags will automatically rename the tags you change.

The plugin works with HTML, XML, PHP and JavaScript without changing the tag name twice.

GitLens

Enhance your Git capabilities GitLens enhances Visual Studio Code's Git capabilities. This is a powerful plugin that lets you see who, why, and how lines of code change over time, among 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

Get git logs with nice visuals

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.

Plugins are also very comprehensive. It allows you to compare branches, commits and files across commits. You can also check the Github avatar, which is quite 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, which may help you automatically format the vue file format when the code is saved. The default is off.

If you don't want to format the vue file automatically, you can also right-click in 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

Plugin your HTML file to view your CSS code

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

It also allows you to quickly jump to the location of the corresponding CSS code if you know the class or ID name.

Javascript Code Snippets

Offers lots of JS code block hints, and while VSCode includes built-in JS IntelliSense, the JS code snippet plugin enhances this experience by adding numerous import, export triggers, class helpers, and method triggers.

The plugin supports JS, TypeScript, JS React, TS React, HTML and Vue. Snippets for other flavors, such as Angular, are also easily available in the VSCode Marketplace.

HTML/CSS/JavaScript Snippets

Just enter the prefix name and the complete code snippet will be autocompleted.

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

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

You can also use the shortcut key to open the browser to search after selecting the corresponding keyword.

Peacock

Change the color of the VSCode instance, very useful. Peacock allows you to change the colors of the Visual Studio Code environment, so you can quickly identify the instance you just switched to.

Colorize

Check out the colors you're using in your style guide, use Colorize to instantly visualize CSS colors in CSS/SASS/Less/... files. This makes it very easy to see at a glance which colors you are using where.

Code Spell Checker

Make your code free from typos, and while typos are not fatal, I prefer my code to be free of typos. Code Spell Checker Plugin Underlines unrecognized words in its dictionary file.

The plugin is available in many different languages and supports jargon such as medical terms.

Debugger For Chrome

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

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

Icon Fonts

Various icons are provided for you to use! Icon Fonts provides snippets of various icon fonts, including the popular Font Awesome v5 icon pack.

For those not using VSCode, this package is also available for Atom and Sublime Text.

Turbo Console Log

To automatically create meaningful log messages, the console displays log \The process of automatically creating a meaningful log message. It makes debugging easier because you'll have some useful console output to figure out what's wrong.

Todo Highlight

Instantly spot TODOs in code, many programmers are used to writing TODOs in code and then forgetting about them completely. Todo Highlight makes them more prominent.

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

VSCode Icons

Wait, doesn't everyone love icons? You wouldn't think icons make a huge difference, but they do have at least for me. VSCode Icons adds a pop of color and cute little icons to your IDE and I'm already in love with it.

Regex Previewer

Create a preview of regular expressions, which can be a difficult puzzle. Regex Previewer provides you with auxiliary documentation that matches your regular expression.

The plugin provides multiple examples to match, making it easier to write regular expressions quickly and accurately for a variety of use cases.

Bookmarks

Bookmark your code, although VSCode has line numbers, Bookmarks allow you to bookmark your code to help you navigate quickly and jump back and forth easily.

Import Cost

When you're developing a web application or website, it's easy to make something bloated -- especially as a novice developer. A big factor in this is that many developers don't always know how big a package is when importing through code.

Import Cost is a VSCode extension that displays the size of an imported package inline, so you know exactly how much it will cost to import that package during development. As such, it will help you better optimize your apps and websites, especially for mobile users who usually suffer more from 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 showing runtime values in the IDE as you code, so you can focus on writing code instead of building custom configurations just to try new things.

This is a simple, lightweight extension that is perfect for experienced developers and newbies alike. It's also free for community use, but if you're a JavaScript/TypeScript expert, you can also purchase a Pro license that lets you modify runtime values without changing your code.

ESLint

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

Also, it allows you to select code regions between bookmarked codes, which is very useful for log file analysis etc.

Visual Studio IntelliCode

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

SQLTools — Database tools

A tool for managing databases through VSCode.
It supports many drivers and you can use it for many things like connection explorer, query runner, intellisense, bookmarks, query history.

Better Comments

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

finally

Here are my personal introduction to 30 VSCode plugins to improve your programming efficiency without compromising quality. , if the articles and notes can help or inspire you, please don't be stingy with your likes and collections, the articles are updated continuously, and the previous articles are also included in https://github.com/Wscats/CV
Welcome your attention and communication, your affirmation is the biggest motivation for me to move forward 😁