Visual Studio Code Extensions

The other day someone in our work chat asked about what extensions they should install on a fresh copy of Visual Studio Code, so I gave them a list of my favourite ones that I use all the time. I later realised that I gave them exactly 10 different ones, so I thought it would make a great top 10 to help others.

I’ve tried to put them in an order of importance or value, but this is obviously very subjective and they’re all amazing.

So here are my top 10 favourite VS Code extensions!

1. Live Server

Live Server is probably one of my most used extensions, mainly for its ease of use. You just click one button and you get your code to open up in your browser of choice, and it auto reloads when it detects changes.

Perfect for static projects like HTML Emails.

2. Code Spell Checker

These days we have spell checkers built into pretty much everything, but not our code editors for some reason. That is why this is an extension that I recommend to people the most. Check out Code Spell Checker whether you’re a fantastic speller or not, it allows you to quickly spot spelling mistakes in any code you open at a glance which is so handy.

3. Highlight Matching Tag

VSCode comes with some highlight matching built-in, but it’s fairly basic. So Highlight Matching Tag takes this a step further.

4. Auto Rename Tag

This plugin just makes your life so much easier. Even though having your code automatically rename your tags may seem to be such a small quality of life improvement, it really goes a long way. Check out Auto Rename Tag for yourself, you’ll enjoy it.

5. GitLens

If you work in a team, GitLens is so valuable in how it helps you by showing who changed what and when the code was updated. It has way more features that I’ve never even used before, but after having a good look at its page on the marketplace, I will be diving into them.

In addition, it’s also wonderfully customisable so you can tailor it to exactly how you desire. That goes for most of these plugins on this list too.

6. Indent-rainbow

Indent-rainbow is a great little extension that just subtly adds some extra colours to VS Code in order to make indentation more readable. It really helps you narrow down where you are in your code block faster.

7. Prettier

Prettier is one of the most popular plugins on VS Code, and it’s no surprise because who doesn’t want nicely formatted code? It can be really useful for teams who use it on a project as it will help enforce a consistent coding style.

8. Better comments

Having well-commented code is very important for your team’s sake, as well as your own. We’ve probably all been there – we create something complicated in JS and then have to go back to it a year later and not know what the hell is going on. Well, you need comments, and not just that, Better Comments.

9. Dracula Theme

This one is completely personal preference, but Dracula is my favourite theme for coding. I just love it, along with nearly 8 million other developers who’ve installed the dark theme.

10. Material Icon Theme

Going a step further, we have Material Icon Theme which adds nice looking icons to files and folders for VS Code, to really makes them stand out.

Bonus

As a bonus, don’t forget to install Settings Sync so you can automatically bring your setup to a new machine with ease.

What are some of your favourite extensions to use?