My Visual Studio Code extensions and why I use them.
Tags: vscode, html, css, javascript
Published: 2020-05-26 19:22:08

I have installed many Visual Studio Code extensions over the years, many of which are quickly uninstalled but here I talk about the ones that have stood the test of time and I use regularly.

### Import Costs

Import costs displays inline in the editor the size of the imported package. 

This is a particularly useful extension when you are working with lots of 3rd party libraries as it gives you a very quick indication of how much extra code you are adding to your own code base. Allowing you to investigate now rather than later if the import size looks quite large.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ka0f8z6bb744ysg3zbmt.png)
<figcaption>Import size for React and React-Moment</figcaption>

[Link](https://github.com/wix/import-cost)

---


### Local History

Every time you modify a file, a copy of the old contents is kept in the local history. This is useful for someone like me who often breaks his code and has no idea why! I can easily revert back or compare it with an older version.

![Local History](https://dev-to-uploads.s3.amazonaws.com/i/06mrebhvdqozahy9h8zn.png)
<figcaption>Comparing two local files</figcaption>

[Link](https://github.com/zabel-xyz/local-history)

---


### Polacode

Polacode is like a polaroid camera in your IDE, I can quickly highlight some code and create an image, brilliant for tweets and blog posts.

![Polacode](https://dev-to-uploads.s3.amazonaws.com/i/x6sbxgoyt4zcl5olp8s4.png)
<figcaption>Polacode code to image</figcaption>

[Link](https://github.com/octref/polacode)

---


### Scratchpads

Scratchpads allow you to create new "doodle" pads that can be saved and loaded from any project as they are saved globally. Great for code snippets or just a dumping ground.

![Scratchpads](https://dev-to-uploads.s3.amazonaws.com/i/xry8tks85qtu6jpeplo7.png)
<figcaption>Sample Scratchpad</figcaption>
[Link](https://github.com/buenon/scratchpads)

---


### Toggle Quotes

Is a handy extension that will toggle quotes from " to ' to &#96;. I probably use this most often when converting a string to a template literal as I can quickly toggle between ' and &#96;.

[Link](https://github.com/BriteSnow/vscode-toggle-quotes)

---


### vscode-icons

VSCode Icons adds cool little icons to each file type, as well as looking nice it does speed up locating a file.

![VScode Icons](https://dev-to-uploads.s3.amazonaws.com/i/pr9889atqpleewpj3iy9.png)
<figcaption>VS Code Icons</figcaption>

[Link](https://github.com/vscode-icons/vscode-icons)

---


### Bracket Pairs

Pairs ups your opening and closing brackets with different colours making it very easy to spot where all your brackets start and finish.

![Bracket Pairs](https://dev-to-uploads.s3.amazonaws.com/i/c6xrpemnqs1xtgcj82n2.png)
<figcaption>Bracket Pairs</figcaption>

[Link](https://github.com/CoenraadS/BracketPair)

---


### Rainbow Indent

I use this package alongside Bracket Pairs as I think they work very well together to add an extra level of readability to your code. 

![Rainbow Indent](https://dev-to-uploads.s3.amazonaws.com/i/5d5g9czh82u36octdbu9.png)
<figcaption>Rainbow Indent with Bracket Pairs</figcaption>

[Link](https://github.com/oderwat/vscode-indent-rainbow)

---


### Live Server

Live server is a super useful extension as it allows you to quickly fire up a test server complete with with live reload directly from Visual Studio code. Especially useful if you are running a quick test and don't want to mess around with a whole build setup. 

![Liver Server](https://dev-to-uploads.s3.amazonaws.com/i/nep58rnqbmxly9o0d6ie.png)
<figcaption>Live Server in action</figcaption>

[Link](https://github.com/ritwickdey/vscode-live-server)

---


### Prettier

I am sure that most of you have this extension installed and will feature on most top vscode extension lists. But it is that good it has to be here. 

Prettier takes your code and formats it for you, simple as that! It hard to think back to life BP (before prettier) although it was not that long ago, 2017!

![Prettier](https://dev-to-uploads.s3.amazonaws.com/i/5jxj9xd27sowvyiamvul.png)
<figcaption>Prettier Before and After</figcaption>

[Link](https://github.com/prettier/prettier-vscode)

---


I will have other extensions installed from time to time but these are the ones I would miss the most if I did not have them installed.

---

Sign up to our free weekly newsletter and stay in the loop with the latest and greatest web development projects on GitHub at [www.trendingprojects.com](https://www.trendingprojects.com/)

{% link iainfreestone/trending-projects-on-github-for-web-developers-2gjl %}

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.