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