Top 12 Best Vs Code Extensions you need in 2022.

All right, so Vs Code, these are ones that you absolutely need. If you Vs code everyday as I do , the you need these extension to improve your workflow ,debugging and making 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 extension's 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 is 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, 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 programing at night time.

2. Auto Close tag

The next one I wanted to show you guys is this one here, attack clothes or I think 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 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 that 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 and that's react whenever you're using a library or a language.

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

And the two that I usually install, this one here, which is for reac native tools, because I do do quite a little bit in Riak 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, which is spell check.

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 some 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 is actually 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, which is 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 I might 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 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. Vs-code Icons

Now, we were customizing Vs Code design a little bit earlier with the dark theme, but one thing I forgot to mention is this one over here. This is Vs Code icons. And if you're using this Vs code, 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 helpful 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 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 that you use in your Vs Code and in your code itself to have a different color depending on how farther 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 I 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 as well.

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 here shows us how we can have two or more people immediately editing code and we can see what they're selecting.

We can actually view into their car and screen, as well as 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 video for JavaScript, and this was Quokka.js.

What it allows you to do is inline JavaScript commentary so that you don't have to print that out to 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 that was my top 10 vs Code extensions that I use in my Vs code there are more popular ones and useful which I may not have included.

These extensions are life saver .It helps you in all scenario like writing clean Code , debugging , formatting and many more things.

If you use Vs Code daily in your day to day work then these extension will be a life changing for you .It will save your time and effort for writing code,

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

More articles to read:

1. Best React.js Examples project that you can build as a beginner.

2. 9 Websites that every web developer should follow.