DEV Community

Cover image for Top 10 Visual Studio Code Extensions That Every Developer Should Use It
Suhail Kakar
Suhail Kakar

Posted on

Top 10 Visual Studio Code Extensions That Every Developer Should Use It

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

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<br>

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

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

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

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

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

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

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

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

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.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

Discussion (1)

Collapse
cavo789 profile image
Christophe Avonture

Settings sync is no more needed. That feature is core since more than one year