# 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](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)”. 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](https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import) (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](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) extension.

### 3\. Auto Close Tag

 

VS Code, since version 1.16, has a built-in feature for HTML, [Handlebars](https://handlebarsjs.com/), and [Razor](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/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](https://marketplace.visualstudio.com/items?itemName=formulahendry.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](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) changes the closing tag automatically while changing the opening tag. Super easy!

Productivity booster…

### 5\. Git Lens

 

[Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 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_](https://twitter.com/devbyrayray) _and_ [_Instagram_](https://www.instagram.com/devbyrayray/) _or_ [_subscribe to my newsletter_](https://buttondown.email/devbyrayray) _which I send when I post a new story._

_Happy Coding 🚀_

### Read More From Me

[**2 Ways to Resolve Duplication in JavaScript Arrays and Objects**  
_Do you know how to deal with duplication?_medium.com](https://medium.com/better-programming/2-ways-to-resolve-duplication-in-javascript-arrays-and-objects-e377e1bdc5e1 "https://medium.com/better-programming/2-ways-to-resolve-duplication-in-javascript-arrays-and-objects-e377e1bdc5e1")[](https://medium.com/better-programming/2-ways-to-resolve-duplication-in-javascript-arrays-and-objects-e377e1bdc5e1)

[**Make Your JavaScript Objects More Predictable by Creating Maps**  
_No more undefined properties_medium.com](https://medium.com/better-programming/make-your-javascript-objects-more-predictable-by-creating-maps-20ac1a795442 "https://medium.com/better-programming/make-your-javascript-objects-more-predictable-by-creating-maps-20ac1a795442")[](https://medium.com/better-programming/make-your-javascript-objects-more-predictable-by-creating-maps-20ac1a795442)

[**How To Earn Money As Programmer During The Coronavirus**  
_3 Ways Programmers Can Get Paid Without The Need Of A Job_medium.com](https://medium.com/the-human-programmer/how-to-earn-money-as-programmer-during-the-coronavirus-a24971b15d57 "https://medium.com/the-human-programmer/how-to-earn-money-as-programmer-during-the-coronavirus-a24971b15d57")[](https://medium.com/the-human-programmer/how-to-earn-money-as-programmer-during-the-coronavirus-a24971b15d57)

[**What Is The Scope In JavaScript**  
_Explanation about the behavior of Var, Const, Let, Functions, Objects, and Classes in the Global Scope._itnext.io](https://itnext.io/what-is-the-scope-in-javascript-a2add52bf9d8 "https://itnext.io/what-is-the-scope-in-javascript-a2add52bf9d8")[](https://itnext.io/what-is-the-scope-in-javascript-a2add52bf9d8)