top of page

Top 10 VS Code extensions for Developers

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code's rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code.

The thing that makes VS Code so popular is the number of extensions available in the Marketplace. With over 30,000 extensions in circulation, the options feel almost limitless – and overwhelming at the same time.

Top VS Code Extensions for Developers to learn in 2022

1. Bracket Pair Colorizer

The VS extension Bracket Pair Colorizer matches corresponding brackets in your code with the same color. This is a great help when you’re working with things like nested components, objects, or functions that all have brackets or parentheses.

With this simple extension, it’s much easier to find matching pairs and understand your code. The biggest advantage of this extension is improved navigation and accessibility. It also makes it easier for others to read and understand your code.

2. Better Comments

Better Comments is an extension used for writing human-friendly comments in your code, which is helpful for you and anyone who is reading source code (especially for teams). Descriptive, human-friendly comments save so much time for everyone involved.

With this VS extension, you can use the following characters after a double forward slash // to add easier commenting:

  • * for highlighted text

  • ! for errors and warnings

  • ? for queries and questions

  • // for strikethrough

  • TODO for to-dos

3. Snippets

Snippets are an excellent add-on for productivity. Snippets is a collection of various extensions for the most commonly used programming languages. The React Snippet is a popular extension, for example, that allows you to use and create shorthands for things you do over and over again.

Some popular options are:

  • Angular Snippets (version 11)

  • Python

  • JavaScript (ES6) code snippets

  • HTML Snippets

  • Vue 3 Snippets

4. CSS Peak

CSS Peak is a great extension for web developers, as it allows you to “peek” at the styles for CSS classes, ids, and even HTML tags. This extension is similar to the Brackets feature called CSS Inline Editors. CSS Peak supports symbol definition tracking for any CSS selector, for example:

  • Peek: load a CSS file inline for quick edits (Ctrl+Shift+F12)

  • Go To: jump directly to a CSS file (F12)

  • Hover: show the definition when hovering over a symbol (Ctrl+hover)

5. Prettier

The Prettier extension is a formatter that helps to keep code style consistent. You can configure your settings however you need and save with shortcuts. Prettier is one of the most popular code formatters out there, with over 38.5k stars on GitHub.

Prettier will automatically fix formatting issues in your code, like fixing the mix of single and double-quotes or an irregular use of semicolons.

This extension works with the following technologies: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML, and more.

6. Relative Path

Relative Path is a great extension for writing import statements. You can easily get the relative path for any file using shortcuts in your workspace. Instead of searching for file’s location, you only need the file’s name, and the extension will provide the relative path from the current location to that target file. Note: It will require some configuration if you’re working with a large mono-repository.

7. Icons

Icons allows you to create descriptive icons to help differentiate between files and folders. This makes your code more visual, so it’s easier to work as teams, return to code after some time, or even just make the experience more fun. For example, you could change the color of a default folder icon using the command palette.

There are a few different Icons extensions, including

  • vscode-icons

  • Material Icon Theme

  • Material Theme Icons

  • Simple icons

8. GitLens

The GitLens extension combines the capabilities of Git with VSCode that allows you to visualize code authorship via Git. GitLens is great for understanding code better, so you can learn who, why, and when code was changed. It also allows you to explore the history and evolution of a codebase.

It also has many other features to use such as:

  • Revision navigation through file history

  • A current line blame annotation at the end of the line showing the commit

  • A status bar blame annotation for the commit and author who last modified the current line

9. Import Cost

The Import Cost extension helps with productivity by showing the estimated size of an import package. This helps to avoid issues by tracking the size of added dependencies. If an import is too large, the Import Cost extension will warns you so you can reconfigure based on the requirements you set.

10. Markdown All in One

Markdown All in One is a very useful extension for all things markdown related. It adds features like auto-preview, shortcuts, syntax autocomplete, and more. Markdown is commonly used across many tech fields, and this extension makes it even easier to work with, boosting productivity and speed.

With Markdown All in One, you can use shortcuts to alter text and add things like bold, italics, etc. It also has useful automations for working with things like lists and math. Here are some common commands:

  • Create Table of Contents

  • Remove section numbers

  • Toggle code block

  • Print current document to HTML

Features of VS Code:

There are many advantages over any other IDE; they are as follow:

  1. 1. Cross-platform support :

  • Windows

  • Linux

  • Mac

  1. Light-weight

  2. Robust Architecture

  3. Intelli-Sense

  4. Freeware: Free of Cost- probably the best feature of all for all the programmers out there, even more for the organizations.

  5. Many users will use it or might have used it for desktop applications only, but it also provides great tool support for Web Technologies like; HTML, CSS, JSON.

The Tech Platform


bottom of page