VS Code is a lightweight but powerful, open-source, easy-to-use source code editor created by Microsoft that is highly customizable mostly thanks to its extension support. From debugging, git integration, UI themes, and programming language support, to Spotify players and dating apps, there is an extension available for almost anything. And if one that meets your need doesn’t exist, you can easily create it with the help of some JavaScript/Typescript and detailed extension documentation.

Here are 10 VS Code extensions that I have found useful:

Git Lens

Git Lens is an open-source extension that brings the capabilities of git to VS Code. By showing the authorship of code over time within the code editor, Git Lens tracks who wrote what line of code and when listing even the commit hash numbers and the specific pull requests where the changes were added to the repository when you hover over the name of the author.

Sonarlint

Sonarlint is an extension that checks the quality and security issues within your code. It works somewhat like a spell checker but checks your code against programming rules in the language you are using and highlights possible problem areas. It then provides suggestions on how to remedy said issues. It currently supports a select number of languages.

Live Server

Live server spins up a local development server with a live reload feature for static and dynamic web pages. Changes made in the code immediately appear in the browser with each save which comes in handy when spotting bugs and experimenting with the code.

Code Time

With work going remote and many people working from home, we are now more vulnerable to distractions when trying to get tasks done. Code Time keeps us accountable by tracking our working time and providing these metrics within VS Code to protect valuable coding time.

Prettier

Prettier is an opinionated code formatter that formats your code on every save. It is especially useful when working on projects with multiple contributors because it enforces a consistent formatting style across the codebase.

Auto Rename Tag

As the name suggests, developers use Auto Rename Tag for the simple, sometimes annoying, task of renaming paired HTML/XML tags, by automatically renaming the closing tag once the opening tag is changed.

Snippets

This is a collection of extensions that primarily create boilerplate code for you in whatever language or framework you write your code in to save you the trouble of writing the same stuff every time. Snippet extensions exist for commonly used languages and frameworks such as JavaScript, HTML, React, Vue, Python, etc.

Import cost

Import cost tracks the size of the packages and libraries you import into your project. While importing and using packages in projects eases development, it also causes overhead in the project load time. A lot of imports could slow down your app and sometimes negatively affect your user experience.

Material Icon theme

This one is on the more aesthetic side of things. When your codebase grows, you have more and more folders and files and it could be difficult to tell them apart. Material Icons theme adds icons to files and folders, inspired by Google’s material design. This helps with visual classification and easy access when we need specific files within the explorer.

Bracket pair colorizer

Bracket pair colorizer, spoiler alert, matches the colors of opening and closing brackets so that you can identify matching brackets using their colors. Quite the timesaver!

Extensions smoothen the development workflow, make development easier, save time for developers and enhance productivity without compromising the quality of the work done. Hopefully, you’ll find one of these useful for your project.