12 Best Vscode Extensions to Boost Your Productivity in 2022

If you work with VS code every day as I do, you need these extensions to improve your workflow, debugging, and make daily coding easier.

I'm going to tell you my favorite extensions in VS code, and we're going to have a look at some of them and why you should be using them.

All right, let's just jump straight into it.

The first thing we're going to do is open up code and head over to extensions to have a look at some of our options.

The very first thing we're going to do is head over to the search up here and grab ourselves a really good theme for obvious code. One of my favorite themes is actually the Atom theme. But what's more - I like the dark version of that.

1. Atom Dark or One Dark Theme

So if we have a look over here, we do get this version called One Dark Pro, which is probably my favorite version. And with this version, you get a lot of cool stuff. If you have a look down here, you get things like a lot of good coloring for classes and functionality and JavaScript as well as variables, and everything is very distinct.

This makes coding much easier.

And to install this, we simply click install, and immediately it's available to us. And this is already looking way better.

I haven't just installed this in VS Code. I've actually set this up in my entire room, the dark thing just makes my life easier, but there's a lot of benefit to using it. I just love using dark themes.

Having really strong, harsh white light on your eyes isn't the best thing, especially when we're staring at our screens all day.

This is why I prefer this dark thing because it's actually good for your eyes. I've done a whole video on eyestrain, but I would recommend you guys use that, especially if you're programming at night time.

2. Auto Close tag

The next one I wanted to show you guys is this one here. It is called Auto close tag. This is also a great extension. It's really simple. So let's quickly install it and have a look at it.

It's essentially going to close any tag that you create.

So if you're writing out code, for example, HTML, it's going to create this closing tag here for HTML. The same with the body.

This might seem pretty simple, but when you're coding, you'll actually find that this is one of the most useful things that you can do over a period of days, weeks, and even years.

This one small extension has saved me hours in extra code that I didn't have to write. It also has saved me in clean code.

This essentially means that if, for example, I'm writing out lots and lots of divs, we all know what happens when we forget. One simple div in the whole page breaks this.

Make sure that all those divs exist exactly as I need them to. I don't forget to add one in.

And on top of that, this works in HTML and works in react and works in pretty much any language. It just closes the tag for you. It's so much easier, and I definitely recommend using it.

3. Auto Rename tag

And there's one more extension that works hand in hand with this, and this is to name tag. As the name suggests, it pretty much does what you would expect it to.

For example, if you do have a tag here and you need to change what type of tag it is at the front of the tag, the back end also changes as well.

This also means that if you have lots of divs and you're not too sure which one is the closing tag, you don't have to worry about that. This extension does it for you.

It also means that if you need to change the closing tag, the opening tag changes as well. This just fixes up little errors and bugs you might have when you accidentally change the wrong thing, so you don't have to worry about all of that. And this just makes life a lot easier.

4. ES7 React/Redux snippets and react Native Tools

There is one library that I use every single day.

It's good to see if there are any extensions for it. In this case, there are some extensions for React, as you can imagine.

And the two that I usually install, this one here, which is for react-native tools, because I do quite a little bit in React Native, and this one here, which has code snippets, this code snippet extension is for Riak Redox and a lot more.

But it makes life easier because when you need to create, say, a react component, whether it's functional or functionalist or a class component, you've got all your little outcompetes completes here, and you can simply type one out, and it completes a full function for you in the code.

5. Code Spell Checker

The next thing that I would definitely recommend everyone install is this one here - spell-checker.

This is an extension which double-checks your spelling.

And while this seems pretty standard, it actually is quite useful because it doesn't just check whether you're typing out regular text properly.

It even checks whether your variable names are typed correctly because we all know what it feels like when you've typed something incorrectly and suddenly we have bugs happening here or there or somewhere, and we don't know where because we start Googling, we start searching.

And in the end, we find maybe just our syntax is wrong. This is why this code spell checker has saved me hours and hours whenever I make changes.

And I see that maybe I wrote in the actual syntax incorrectly. It helps me identify that way faster and also helps me spell because my spelling isn't the best.

If you are looking for good extensions and nothing you can do, go over here and filter them, and when you feel to them, you can filter them by the most popular extensions and get an idea of what's good and what's not here.

6. Prettier Code-formatter

And the other one I'm going to install here is prettier, a code formatter.

And this one has been quite useful to me because when I'm writing out code, I might not always write it the best way.

I might forget to add a tab or even forget to outbreak lines.

I just sort of write all my code and then figure out maybe I can edit it later to a little good.

Using prettier essentially beautifies my code so that when it's time to present it, I'll push it out through git. Then it looks like a professional did it and definitely not me.

7. Live Server

Another plug-in I find myself using quite a bit.

Is this one here for a live server? This is pretty simple.

It simply opens up a browser window of your current working directory and opens it up on a port so that you can start editing it and seeing those changes on the browser.

This is pretty simple but useful, and something that I would recommend you guys do instead of maybe installing a full Web server or manually refreshing the page.

8. VSCode Icons

Now, we were customizing VS Code design a little bit earlier with the dark theme, but I forgot to mention this one over here. This is VSCode icons. This is simple, actually. Just add some really nice icons next to your folders so that you know what they are going to select to use them over here because they're great.

And this just makes life easier. If there's a react file, it gives you a nice react logo next to it. If there's a folder, you have a folder icon.

And while some people might not like this for me personally, I find it actually helps it helps me identify what I'm looking for in terms of files much faster.

9. Bracket pair Colorizer

So, the next one is pretty much used by every web developer who uses VS Code.

It's called the bracket pair color colonizer.

And if we scroll down through the documentation given just below the extension, you can see the example of what this looks like. It essentially allows the brackets you use in your VS Code and your code itself to have a different color depending on how further nested. And while this seems like a simple change, it has a huge benefit because sometimes you don't know if you've closed off your brackets properly.

And this allows you to see that visually much easier, then. Otherwise, you would know that half the bugs that I make in JavaScript are usually related to me forgetting to close a bracket, and this one plugin has saved me lots of time in terms of debugging.

10. Microsoft Live Share

If you're working in a team, though, there's another plug-in here by Microsoft called Live Share.

Live Share actually allows you to collaborate with voice code on a shared project through a client and a host, LIVE. So you can actually see the code editing in real-time where the little cursor if you want, you've got some chat in there at different types of missions.

So, for example, if you want someone to just view or edit the code, you can do that, too. And I have a real-time example of this right now. So I might pull that up for you guys so we can have a look at that. So here it is. This example shows us how we can have two or more people immediately editing code and seeing what they're selecting.

We can actually view into their car and screen and see their cursor as they're editing in real-time. And they can save these projects essentially. So one person could host this project, one person can edit it, and you can even access the console and run different commands. So this is really cool.

11. Dot ENV

Another one that I would recommend is the ENV extension because I'm using a lot of JavaScript, and in most projects, I do have a dot ENV just doesn't have any styling.

This simply adds a little bit of styling to your ENV file so you can see what it looks like, what kind of variables you're passing, where there are comments, and where there are Booleans.

12. Quokka.js

There's also a really cool extension that I was using in my last JavaScript video, which was Quokka.js.

It allows you to inline JavaScript commentary so that you don't have to print that out to the console. This might seem interesting because, for example, sometimes, when you're debugging or checking code, you get to see that in real-time, and you can edit it and see what those changes reflect. This is really cool. You don't have to use a debugger. You don't have to use a console. You just immediately type your code and see how it's going.

But if you guys want to check it out, it's just over there. You can install it, and it's pretty much free for a community edition. It actually syncs with an online cloud server and sends you back this information in real-time.

Conclusion

So yeah, those were my top 10 VS Code extensions that I use in my VS code.

These extensions are a lifesaver. It helps you in all scenarios like writing clean Code, debugging, formatting, and many more things.

I hope you enjoyed reading this article and if you have read till here, thank you so much for reading.

Also published here.