Top 10 Visual Studio Code Extensions That Every Developer Should Use It
Tags: productivity, programming, vscode
Published: 2021-09-06 06:02:04


Visual Studio Code is by far one of the most popular code editors for web, mobile, and hardware developers. More than 2,600,000 people use VS Code every month, up by over 160% in the last year.

In this guide, we’ll explore the top 20 VS Code extensions that every developer should know in 2021.



### Bracket Pair Colorizer

If you are working on big projects where functions and components become very complicated, bracket pair colorizer is the one who can help you

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use. It is one of the must-have extensions for all developers. 

Link : https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer


![Bracket Pair Colorizer](https://cdn.hashnode.com/res/hashnode/image/upload/v1630828799003/xu-uoSinc.gif)



### Auto Rename Tag

For web developers, Auto Rename Tag is a fantastic VS Code extension. Auto Rename Tag, as the name implies, renames the second tag as the first is updated, and vice versa. 

Link : https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

![Auto Rename Tag
](https://cdn.hashnode.com/res/hashnode/image/upload/v1630829170171/Y0qExTYqc.gif)

### Better Comments

Having descriptive comments can save a lot of time for you and your team. The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into :

- Alerts
- Queries
- TODOs Highlights 
- Commented out code can also be styled to make it clear the code shouldn't be there
- Any other comment styles you'd like can be specified in the settings

Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

![Better Comments](https://cdn.hashnode.com/res/hashnode/image/upload/v1630829587544/Mpjhn-xFS.gif)

### Stack Overflow View
After installing this extension you don't need to go Stack Overflow website again, you can get all your answers in VS Code. It is a Visual Studio Code extension for access to Stack Overflow inside of the editor. It supports English, Spanish, Russian, Portuguese, Japanese.

Link: https://marketplace.visualstudio.com/items?itemName=4tron.stack-overflow-view

![Stack Overflow View](https://cdn.hashnode.com/res/hashnode/image/upload/v1630830320171/y29_2dE9s.gif)

### Prettier
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. It supports JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, LessHTML, Vue, Angular GraphQL, Markdown, YAML and etc. 

Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

![Prettier](https://cdn.hashnode.com/res/hashnode/image/upload/v1630904166310/MXh4PuZqB.gif)

### Code Spell Checker

A simple source code spell checker for multiple programming languages. A basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Link: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

![Kidultsports-Admin-main-1630904330094.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630904411405/ZHzP6sbSg.gif)


### Thunder Client

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with a simple and clean design.

Link: https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

![Kidultsports-Admin-main-1630904551804.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630904592546/XFH5_0POz.gif)

### Settings Sync
Instead of specifying your settings each time, you can save them in the editor and restore them on a new system with this plugin. This is important for customizing the development environment in the editors.

Link: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

![Kidultsports-Admin-main-1630904703893.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630904761062/3sqRSeUMz.gif)


### Import Cost

Import Cost is a VS Code addon that estimates the size of an import package in your code. It's critical not to jeopardize the user experience by importing large packages when working on a project.

Link: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

![Kidultsports-Admin-main-1630905023525.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1630905056025/lHFcy3kKP.gif)


### Live Share
Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more.

Link: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

![screely-1630905320043.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630905326360/8BZgMcIcr.png)




## Conclusion 

I hope you’re eager to use these 10 amazing VS Code Extensions to develop your application. If you need any help please let me know in the comment section. 

Would you like to buy me a coffee, You can do it [here](https://www.buymeacoffee.com/suhailkakar).

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/). 

👋 Thanks for reading, See you next time