6 Visual Studio Code Extensions I Cannot Live Without

Published in

JavaScript in Plain English

4 min readApr 27, 2021

VS Code is an excellent editor and has some really good extensions available for it. I regularly switch between VS Code and Visual Studio Enterprise and I wish that the extensions and responsiveness in VS Code were available in Visual Studio Enterprise. I’ve found some similar extensions but not all of them.

1 — Prettier

You either love it or hate it. When I first installed it I was absolutely gutted when it reformatted all my carefully formatted code, but a week or so later I couldn’t live without it.

The benefit of working in a team where you’re all formatting the code the same way is awesome when working in a DVCS like Git or PlasticSCM.

Remember to turn Prettier plugin on as the default formatter once installed, otherwise you’ll be hitting save and seeing nothing happen.

Prettier VS Code settings required to see it work when you hit save

Get it here for VS Code : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Potential Visual Studio equivalent (not tested) : https://github.com/warrenseine/prettier-plugin-csharp

2 — Bracket Pair Colorizer 2

It’s simple but useful. This plugin colours the visual links between bracket pairs. Each new nested pair loops from a colour palette. You can configure the colours and other styles.

Get it here : https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

3 — Better Comments

This small plugin helps you make comments more friendly. TODOs, Alerts, Highlights etc all jump out at you visually.

Example of some of the comment colours using Better Comments plugin

Get it here VS Code: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Visual Studio equivalent: https://marketplace.visualstudio.com/items?itemName=OmarRwemi.BetterComments

4 — Material Icon Theme

Projects are so much easier to navigate with this plugin installed. My default VS Code was lacking icons for folders and once a project gets big, it all looks the same.

What’s really cool about this plugin is that they use the folder or file name to set the icon, the hard work is already done. Install it to see the difference, you won’t go back. Take a look below…

Before:

After:

Get it here : https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

5 — Indent rainbow

This is a subtle plugin that shows a different colour from a loop at each level of indent. It can be configured to be as bright as you like but I’ve got my rainbow dialled back.

What is pretty cool is it highlights indent errors, although Prettier clean these up on save.

My settings, from settings.json

"indentRainbow.colors": [
    "rgba(255,255,64,0.04)",
    "rgba(127,255,127,0.04)",
    "rgba(255,127,255,0.04)",
    "rgba(79,236,236,0.04)"
],

Get it here for VS Code: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Visual Studio equivalent: https://marketplace.visualstudio.com/items?itemName=chingucoding.IndentRainbow

6 — Toggle Zen mode

Adds a little zen button that when clicked makes the code editor go full screen. I have mine set to then work with a narrow window in the center. Good for maintaining focus on a file.