# VS Code Extensions = Happy Developer (/docs/blog/vs-code-extensions-happy-developer)



![](https://cdn-images-1.medium.com/max/1024/1*ofMfrqFMfpaTH_RMvI_RQA.jpeg)

Being a **full stack developer** with [Slalom Engineering](https://medium.com/u/94e9f55e63c7) means a huge chunk of my time is spent working on technical challenges in a number of domains. My day to day work can range from setting up **CI/CD with Docker on Jenkins**, to building scalable and resilient cloud architecture on **AWS**. Other days I’ll be using \*\*Angular and NodeJS \*\*to build products that serve people across the country, and the world.

A commonality across all that work is that I spend a lot of time in my IDE of choice, **Visual Studio Code**. In my opinion, a good IDE makes for a happy developer, and great IDE extensions make for a very happy work life.

Everyone wants to have a happy work life so here’s a list of some of my favourite and most loved Visual Studio Code extensions!

> Bonus: These are mostly language agnostic!

### **Better Comments** [#better-comments]

[Better Comments - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

If you’re someone who likes to leave a lot of notes in your code such as TODOs, this extension makes those TODOs pop out in your code, making sure you don’t forget them in the future.

![](https://cdn-images-1.medium.com/max/459/0*MB-OHvZFqWPO6iEJ.PNG)

### Bookmarks [#bookmarks]

[Bookmarks - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

If you’re someone who works with a lot of micro-services and likes to have multiple projects in a single workspace, this extension is a great way to jump between heavily looked at code. This extension also comes with a dedicated section on your side activity bar for quick access.

![](https://cdn-images-1.medium.com/max/885/0*40Wo-5JwDTNj6b7h.gif)

### Bracket Pair Colorizer 2 [#bracket-pair-colorizer-2]

[\[Deprecated\] Bracket Pair Colorizer 2 - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

A \*\*MUST HAVE \*\*for anyone who works with languages or data that is heavy with brackets. This extension colour codes each pair of brackets for easy identification.

![](https://cdn-images-1.medium.com/max/370/0*6jkGssk4rcslYIKm.png)

### Color Info [#color-info]

[Color Info - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=bierner.color-info)

A neat little tool for any front end developer who’s working with colours.

![](https://cdn-images-1.medium.com/max/1024/0*Cc35k6VGvTrn1Zv1.png)

### Dracula Official [#dracula-official]

[Dracula Theme Official - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)

**Personally, my favourite theme without a doubt**.

I’ve tried other themes, but time and time again I come back to this one.

![](https://cdn-images-1.medium.com/max/1024/0*HYizt4_zxh1qzyjs.png)

### Eslint [#eslint]

[ESLint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

All JavaScript developers should have this. Provides ESLinting for your JavaScript ensuring you and your coworkers still remain friends after your project finishes.

### Github Pull Request [#github-pullrequest]

[GitHub Pull Requests - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

A recently discovered extension for me, but I’m using it now almost on a daily basis. Integrates with Github as a section on your side activity bar. Create or view pull requests straight from VS Code. Add reviewers, see comments and it includes comments integrations straight into your code.

#### Don’t think about it, just get it. [#dont-think-about-it-just-getit]

![](https://cdn-images-1.medium.com/max/1024/0*RLgldm7XWHo_k9i-.gif)

### Git Lens [#git-lens]

[GitLens - Git supercharged - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

A fantastic tool that really leverages what Git has to offer. This tool has so much to offer, it’s just easier to show an excerpt from GitLens itself.

![](https://cdn-images-1.medium.com/max/1024/1*RLS1y-SlzhMDFp67iKjDBg.png)

My favourite quick feature is the **current line blame annotation**. Perfect for finding out that the person who wrote that horrendous, complete disaster and unmanageable piece of code was actually you 3 months ago.

Oops.

![](https://cdn-images-1.medium.com/max/727/0*aJOoESIGuVmtIWXF.gif)

### Import Cost [#import-cost]

[Import Cost - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

Everyone knows just how much fun NPM is. Installing one package leads to another, and before you know it, your ToDo list app now has over 100 unrelated packages installed. This extension displays inline the size of that imported package, so importing all of **lodash** just to check if an object is empty? Might be time to rethink that import.

![](https://cdn-images-1.medium.com/max/838/0*tSfLXKd82NnYfs2A.gif)

### Indent Rainbow [#indent-rainbow]

[indent-rainbow - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

A great tool for those working in an indent heavy language such as Python, or just working with a lot of nesting. Colour codes indentations making it easier to visually see where everything is.

![](https://cdn-images-1.medium.com/max/262/0*p_XBsVS62aHiWw_Q.png)

### NPM Intellisense [#npm-intellisense]

[npm Intellisense - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

Forget that name of that new package you just downloaded that will solve all of your problems? Don’t worry, **npm intellisense** has got you covered.

![](https://cdn-images-1.medium.com/max/931/0*TdPIf8HOr4GsTqNZ.gif)

### Path Intellisense [#path-intellisense]

[Path Intellisense - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

Forget that name of that new file you just wrote that will solve all of your problems? Don’t worry, **path intellisense** has got you covered.

![](https://cdn-images-1.medium.com/max/480/0*zSBwB4kXT1C3dqZC.gif)

### Prettify JSON [#prettify-json]

[Prettify JSON - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json)

Who doesn’t love unreadable and heavily disorganized JSON objects? In the odd case that you don’t live a life engulfed in chaos, Prettify JSON makes your JSON human readable in just a single action.

### Rainbow CSV [#rainbow-csv]

[Rainbow CSV - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)

Working with huge CSVs are never fun, but at least you can put pretty colours on it. This extension colour codes different column values so its easier to tell what is what, over the different rows.

![](https://cdn-images-1.medium.com/max/1013/0*6ZT-Xw_nsvGTMpN4.png)

### Settings Sync [#settings-sync]

[Settings Sync - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

If you find yourself working on different devices, whether it’s client, work or personal laptops, this is a lifesaver.

This extension ties into your Github Account to create a gist saving all of your VS Code settings/extensions/shortcuts, just about everything. When working on a different device, you can just sync all your options through the gist, and Tada, you’re ready to go.

### Swagger Viewer [#swagger-viewer]

[Swagger Viewer - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer)

This extension gives you a colorized output of your swagger file. Great for making sure your swagger file is up to par before sending it through, or for reading someone else’s specifications.

![](https://cdn-images-1.medium.com/max/1024/1*NYUUH658nun6u_K-Ir1fUA.png)

### TODO Tree [#todo-tree]

[Todo Tree - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Another TODO extension, this one gives a nice section in the activity bar listing all of your TODOs in your project.

No more excuses for forgetting where you left that critical \*\*TODO: fixme, \*\*which we all know, is going to stay like that for the next unsuspecting maintainer of this codebase, only for them to pretend they also forgot about it.

![](https://cdn-images-1.medium.com/max/1024/0*4qc7aEOIvgBI9cVc.png)

And that’s just a portion of my currently installed extensions!

Do you love extensions as much as me, and want to install more? Check out this awesome list below with extensions for everything you can think of!

[GitHub - viatsko/awesome-vscode: 🎨 A curated list of delightful VS Code packages and resources.](https://github.com/viatsko/awesome-vscode)

> Have a recommendation on an extension I should have?

> Do you think have more VS Code extensions installed than me? ***(50+)***

> Let me know in the comments or reach out to me @[**Linkedin**](https://www.linkedin.com/in/matthewpua/)**.**