9 Must Have Visual Studio Code Extensions To Make You A Happier Developer

Image of a Visual Studio Code logo on a clipart desktop background.

Table of Contents

Beyond the glamour, beneath the paycheques and before all else, developer happiness should be at the forefront of every software programmer. And your virtual work environment plays an important role in facilitating your work wellness. Put simply, the better your tools, the greater your craft. And this, in turn, releases a bunch of oxytocin and dopamine that’ll keep you happily-grammin’ even when your PR request is rejected.

In this article, I’m giving you a list of the 9 must-have VS Code extensions to add to your toolkit. Whilst you don’t need to have them all, you’ll discover some important nuggets, so feel free to pick n’ mix as you fancy.

Let’s start!


Live Server

This is my number extension of all time. I can’t work without it and if you do any frontend programming, you need Live Server. With over 24 million downloads, Live Server opens your HTML on a live browser and reloads each time you save your code. You’ll be able to see those CSS style changes as quickly as you’re writing them.

Prettier

Self described as an opinonated code formatter, Prettier enforces a consistent style across your entire codebase. It’s especially useful for when you’re working in a team because everyone’s code will have a uniformed formatting therefore eliminating any awkward pull request discussions as to what constitutes code readability. It will save your team time and keep your code looking pretty.

VS Code Icons

Another one of my favourites, once you have this installed, all the files in your explorer will be lit up with its own icon. VS Code Icons will save you hours of frustration because you’ll be able to quickly identify your files at a glance.

Indent Rainbow

Because there’s nothing more annoying than combing through your codebase searching for the missing closing brace that’s breaking your code. Indent Rainbow solves this problem by colour-coding each level of indenetation so that the hierachal structure is visibly clear.

Relative Path

I thought twice about placing this one on the list because VS Code already comes with a pretty good path-suggestion functionality. If you don’t need it immediately, bookmark it for when you’re working on legacy code.

Live Share

If you’re just learning how to code and don’t have a team yet, bookmark this extension – it’s a must. Live Share enables you to collaborate on code with others. Put simply, you can edit and debug code in real time with other people. This is a brilliant piece of kit for remote techies.

Color Picker

This is another “cannot live without” extension. Color Picker enables you to edit your colour within your CSS file. So if your colour palette doesn’t look quite right on the browser, you can edit it live within your code.

Peacock

For those times when you need to open multiple VS Code workspaces, Peacock color-codes each individual workspace so that you can easily switch back and forth.

Polacode

Sometimes, it’s necessary to beautiful screenshots of your code to share on social media. Thankfully we have Polacode to help us out. You cannot help but fall in love with the beautiful aesthetics of the images.


Final Thoughts

Download and road test the ones you like. You’ll find that in time you’ll discover the ones that makes you the most productive. We all have our personal preferences and although this list contains some of my favourite VS Code extensions, there are still some pretty awesome ones out there.

get the best real-world tutorial, right to your inbox!

    let's get social!

    recent posts

    Get the best real-world projects, right to your inbox!