5 Visual Studio Code Extensions to Improve Your Productivity

Visual Studio Code has been my favorite editor when working with code from the beginning. As developers, most of us like tools that can make our work easier, more productive, and faster.

In this post, I want to share my top five VS Code extensions that improve my productivity daily.

1. Auto Import

One of my used VS Code extensions is “Auto import”. I highly rely on this while working on my Angular or TypeScript projects.

When you type a function, class, or variable that is in another file, when you’re typing, it will show the yellow balloon in VS Code, when you click on it, you can select import or import all the missing dependencies.

This saves me a lot of time with typing paths!

While this plugin is only for TypeScript, there is also another one (probably cloned from this one) that supports ES6, TS, JSX, TSX which is great!

2. Path Intellisense

At times, when it happens that I want to embed a file in my HTML, for example, I’m very happy that while typing I can see the path and files in that directory.

This saves so much time during the day! I love the Path intellisense extension.

3. Auto Close Tag

VS Code, since version 1.16, has a built-in feature for HTML, Handlebars, and Razor to automatically close tags.

But when you write XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX, and Angular code, it is so nice that you get the closing tag automatically after typing the opening tag.

For me, Auto Close Tag is such a productivity booster during the day, since I don’t have to type those closing tags myself anymore.

4. Auto Rename Tag

Maybe you have that as often as me, but in my HTML, a lot of times I start by making a <div>. And after filling the lines with more HTML, I eventually discover that the other tag makes much more sense.

In those times, I’m very happy that I don’t have to search for the closing tag. Auto Rename Tag changes the closing tag automatically while changing the opening tag. Super easy!

Productivity booster…

5. Git Lens

Git Lens is the best integrations for using Git in Visual Studio Code.

Open a file and you can see that when that line changes the last time with the name of your team member next to it. It can help you show the differences over time in one file while putting them next to each other.

If you want to see which files are changed in a specific commit, Git Lens will help you with this.

This is my favorite “all things Git” Visual Studio Code extension. A booster for your productivity!

Conclusion

I hope that these extensions will boost your productivity as they do for me! If you have another Visual Studio Code extension that boosts your productivity, but I missed it on my list, please link them in the comments.

Let’s share some VS Code extensions!

Hi, I’m Ray a Dutch 🇳🇱 JavaScript Developer and love to share my knowledge which I gained from being a Developer since 2009. I write stories about JavaScript, TypeScript, Angular, and anything related to life as a developer.
You can follow me on Twitter and Instagram or subscribe to my newsletter which I send when I post a new story.

Happy Coding 🚀