Top 7 VS Code Extensions You Must Have To Boost Your Productivity

Supercharge your coding environment with these extensions

Photo by Mohammad Rahmani on Unsplash

As a software engineer and CS student, I spent a good chuck of my time to write a lot of code (or modify one from the internet 😉 admit it my fellow programmer). To support this task, we all need to have code editor. I work with many types of IDEs for the past 2 year depending on the task, but one always come handy. And that code editor is Visual Studio Code.

One of the biggest reason why I love VS Code is Extensions. Yeah, VS Code in its vanilla form might just be a fancy notepad. However, with extensions VS Code can really do heavy lifting work.

But Joe with thousand of extensions out there which one should I use?

This is why in this article I want to share my 7 must have extensions for your VS Code which I personally use and found really helpful.

1. Auto Rename Tag

GIF by Author

Have you ever write HTML file before, and mistype your tag? Remember the hassle you need to go through as you rename it manually. But with these extensions those tedious task are eliminated. As the name suggests, you only need to rename the first tag and the second one will be automatically renamed. I personally felt it really help me when I’m working with Laravel (the Blade elements), HTML, and React. So, this is a must-have extensions for web developers.

2. Material Icon Theme

GIF by Author

The default explorer in VS Code is pretty bland in design. Also when you are working with a project that have many folder it is confusing to differentiate each file by name. Make your explorer prettier with this extension. This will also help you identify each file by its type.

3. Live Server

GIF by Author

Modern framework such as React and Laravel have hot reload, a developer beloved feature. This feature allows changes in code to automatically displayed on screen. What if we want to have this feature when working with plain HTML or other framework? Live Server is here to rescue.

4. Live Share

GIF by Author

Throw away the need for screen sharing! When you need to do pair programming, debug a junior code, or collaborate with teammates use this powerful extension and you can work on the same project live just like using Google Colab or Docs. You can also explore Live Share Audio if you felt the need to have audio call directly from VS Code.

5. Git Graph

GIF by Author

Working with Git in a multi branch repository sometimes can be very frustrating. It’s hard to check how far your branch is behind the main one, other people’s branches position. Git Graph will make your life much easier by giving visual presentation of your git situation. Don’t be shock if you and your team have made spaghetti 😜

6. Git Lens

GIF by Author

Git Lens is a superhero. Yes, I dare to claim it since Git Lens was like an Avengers, have a lot of powerful features that works like heroes. Want to see the commit in your repo? Done. Want to see the content of stash you’ve previously made? Easy. Want to see who have just push this line of code that broke your entire project? Git Lens will help you find the culprit with the “blame” feature. In conclusion? Install it or suffer on your own.

7. Bracket Pair Colorizer

Image by Author

When writing code with the language like C#, PHP, JavaScript, etc. you will encounter a lot of brackets. When you are having nested conditional or loop statement, these bracket can get really messy. So, before you think of moving to Python, use this extension. This extension will give color to your bracket and make it easier to distinguish each pairs of brackets. Install it, and make your code more colorful.

Notes

When I’m writing this article I found out as of September 2021 this feature has become native in VS Code. You can find the details and advantage in the VS Code official website. To enable it you can do these steps :

1. Open command palette via Ctrl + Shift + P
2. Apply the command “Preferences: Open Workspace Settings”
3. Search “bracket pairs”
4. Set the Editor > Bracket Pair Colorization: enable and Editor > Guides: Bracket Pairs to true

Text Editor Settings

These are the native implementation of the Bracket Pair Colorization

Illustration by Henning Dietrichs from official VS Code Blog

The native implementation may not have the colorful bracket but its major advantage is the much processing speed

Instead, in the 1.60 update, we reimplemented the extension in the core of VS Code and brought this time down to less than a millisecond — in this particular example, that is more than 10,000 times faster. -Henning Dieterichs-

For me, I still use the Bracket Pair Colorization Extension since the native implementation doesn’t really work in my VS Code (Desember 2021)

VS Code only colorized the line, but not the bracket itself

I hope that this bug will be solved and we all can migrate to the native implementation, since the extension won’t be maintained anymore and soon deprecated.

Summary

So I have present you with my top 7 must have VS Code extensions which are

1. Auto Rename Tag
2. Material Icon Theme
3. Live Server
4. Live Share
5. Git Graph
6. Git Lens
7. Bracket Pair Colorization

I hope you find this article helpful and you learn something new today. Feel free to drop other VS Code extensions you find as a “must have” so we can explore it together. That’s all from me and Ciao!