Top 10 VSCode Extensions You Must Have in 2021

Published by Piotr Blachnio on

Top 10 VSCode Extensions You Must Have in 2021

Visual Studio Code is probably the most popular code editor in 2021. It’s fast, modern, and easily customizable. Why don’t we enhance it even more to get the most out of it? Thanks to many third-party extensions, we can improve Visual Studio Code using other people’s solutions. There are tons of different plugins you can choose from. Some of them are really helpful, while others can be quite useless. The goal of this article is to give you the Top 10 VSCode extensions that can significantly improve your programming experience.

Do you wanna start your career as a Backend Developer? Check out the guide on How to Become a Backend Developer in 2021.

If you want to improve your existing skills and master programming, here are the Best 17 Books for Programmers in 2021 that will help you.

1. Settings Sync

Settings Sync VSCode Extension

Imagine that your favorite code editor is full of great extensions, themes, and fonts. Unfortunately, you have to move to a different environment and start customizing everything from scratch. Wouldn’t that be annoying? That’s when Settings Sync, which is one of the most popular VSCode extensions, comes to the rescue. It allows you to synchronize the VSCode settings across all your devices. The only thing you need is a Github account to save your progress.


Bookmarks Visual Studio Code Extension

Do you tend to have long files with tons of content? Your go-to solution should be refactoring that huge file and splitting it into several smaller ones. Unfortunately, it’s not always possible. With the Bookmarks extension, you can easily create annotations across your project to easily navigate and jump between essential parts of the code.

3. Better Comments

Better Comments Extension

Better Comments extension allows you to write more readable and human-friendly comments. It highlights the syntax with different colors depending on the use case. It’s easy to get lost when there are many messy comments out there. This extension will help you categorize them and highlight the most important things. You can create the following types of comments:

  • Warnings
  • Queries
  • Highlights
  • TODOs
  • Strikethrough comments

4. Bracket Pair Colorizer

Bracket Pair Colorizer coding syntax

While working with a massive amount of code, it’s easy to get lost inside different brackets. Bracket Pair Colorizer will colorize matching brackets so you can quickly determine the corresponding one. It’ll save you a ton of time and effort. This extension might seem trivial, but at the same time, it’s really beneficial. Having multiple brackets can be confusing for every programmer, whether you are a beginner or a more advanced coder.

5. Prettier

Prettier code formatter landing page

Prettier is an opinionated code formatter. It’ll help you with consistency and cleanliness in your project by enforcing preset style rules. It’s even more beneficial while working in a team. Many people write in different styles, and everybody has their own preferences. The project would become pretty hectic when every single programmer did something in their own way. That’s why we use Prettier. It makes sure the style is consistent, and everybody follows the same rules in their code.

6. Git Lens

Get Lens VSCode Extension

Git Lens is a great extension that combines VSCode with Git features. It shows you annotations about when the code was last modified and who did that. It’s really useful while working on a larger project with many people involved. It helps organize the mess of changes and lets you know who has written the piece of code that you’re looking at. What’s more, you can navigate back and forth through the history of a file. Here are only a few features that Git Lens provides. To learn more, check out the official documentation.

7. Import Cost

Import Cost Visual Studio Code Marketplace

If the application performance is essential for your project, you should consider using the Import Cost extension. It displays the package size next to every import that you create. By doing so, you can detect huge modules that might not be required and can harm the user experience. If you have lots of modules, reducing their number can significantly impact your application’s performance. When a package size is relatively large, it warns you about it. Therefore, it’s even easier to detect potentially harmful modules.

8. Live Share

Live Share VSCode Landing Page

Have you always wanted to code with your friends in a live session? If so, Live Share is a perfect extension for you. It lets you collaborate with other people in real-time. You’ll immediately see changes made by your teammates, as well as their cursor and the common terminal. Such collaboration is a great way to have fun and be productive at the same time. It can also be used in many different scenarios, such as during a code review. What’s more, it’s considered one of the best VSCode extensions out there.

Skill up. Online courses from $9.99

9. Code Snap

Code Snap screenshot

Code Snap is an excellent VSCode extension for sharing code with other people. It inherits the theme from your settings, so your screenshot will look like your favorite code editor. That’s awesome, isn’t it? It quickly saves the image of your code and copies it to your clipboard. It has many configuration options, so you can customize it for yourself.

10. Live Server

Live Server Visual Studio Code Extension

If you’re a web developer, this extension is a must-have for you. It’ll launch a live server in your local machine and update the content in real-time every time you make a change. You don’t have to refresh anything because Live Server will do it automatically for you. Every time you make some changes, you’ll see them reflected in your browser. Thanks to it, you’ll be able to spot mistakes faster and debug your code more efficiently.

Top 10 VSCode Extensions – Conclusion

As you’ve seen, there are many useful VSCode extensions that can make your life easier. They can help you become more productive and efficient as a programmer. Some of these extensions will make the editor more visually appealing, while others will save you a ton of time finding bugs and debugging the code. Don’t install all of them at once. Pick a few that really drives your attention and try them out. Learn how to use them and make the best of out them. Remember, that small decisions matter. You won’t see significant progress in the short term. Fortunately, all these small things will compound, and, in the long run, will make you a much better programmer than you’re today.

If this article gave you some value, don’t forget to share it with other peopleThank you!


Leave a Reply

Your email address will not be published. Required fields are marked *