VS Code Extensions to become a more productive Developer 🤓🤓🤓
Tags: beginners, webdev, vscode, tutorial
Published: 2020-10-12 09:08:55

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at **[https://codesnacks.net/subscribe/](https://codesnacks.net/subscribe/)**

---

These are some of the **VS Code Extension** that I'm using on a regular basis to make me a more productive developer. This is not a complete list, but these are some of my favorite extensions.


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

This extension allows matching brackets to be identified with colors, which comes super handy in almost every use case.
A lot of you might new the *Bracket Pair Colorizer* extension already because it's an essential extension of VS Code. But version two of the extension is even faster and more performant.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/27ld13ofbece3b1txf74.png)

---

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

This extension will display the size of the imported package inline in your editor. Of course, you can also do that yourself using [bundlephobia](https://bundlephobia.com/) but using the *Import Cost* extension just saves you some time with every package.

---
## [Toggle Quotes](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes)

The *Toggle Quotes* extension comes in quite handy if you have to switch from one type of quotes to another. Let's say you start to delimit your string with double quotes (in JS), but then realize that your string actually contains a double quote. With just hitting `cmd '` or `ctrl '` on win/linux you can easily change the wrapping quotes of your string. It's of course also super handy to switch from double quotes to a JavaScript string literal.

---

## [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)


Are you working with multiple VS Code workspaces and multiple projects? 
Peacock lets you change the color of your VS Code workspace. It's ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor and distinguish between multiple projects. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pveytrmnv3y7xarv53vv.jpg)

---

## [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

If you want to create beautiful "screenshots" of your code, to share it for example on Twitter, this is the extension to use. *Polacode* let's you select the code, resize the resulting snippet and create a perfectly shareable screenshot of your code using your VS Code theme and font. 


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6d4c0pxdj66kmanen48l.png)

---

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

Better Comments is a cool extension to give different types of comments different colors. It helps you e.g. to easily differentiate between TODOs and "real" comments.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zqil36y4rjn5mxxxicm3.png)

---

## [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that for example take the maximum line length into account and wrapping code when necessary. The times where you have to indent code, add trailing commas or discuss code style with your colleagues is over. Let *prettier* format your code automatically. Of course, you can also use your own rules for indentation, quotes, etc.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wovdhim5pa93t2a3ec3s.png)

---

## [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

Indent Rainbow colorizes the indentation in front of your text alternating four different colors on each step. It might be a bit too much if you're Bracket Pair Colorizer in combination, but if you're e.g. using Python where your indentation indicates a block of code, it can be very useful.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k2gskuatijpuide4np0t.png)
---


## What about you?
What are your favorite **VS Code extensions** to make you a more productive developer? Please share them in the comments!

---

Want to get better at Web Development?
[🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter](https://codesnacks.net/subscribe/)