5 Visual Studio Code Extensions to Improve Your Productivity

Improving our development workflow in VS Code

Dev by RayRay
Mar 15 · 4 min read
Image for post
Image for post
Photo by krisna iv on Unsplash

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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 🚀

Better Programming

Advice for programmers.

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store