My Top 5 VS Code Extensions
Tags: editor, vscode, tools, extensions
Published: 2019-07-03 21:59:08

---
title: My Top 5 VS Code Extensions
published: true
description: 
tags: editor,vscode,tools,extensions
---

Since I started coding I have used many text editors, such as Sublime, Atom and even vim (I know this is a bit different but it can be considered an editor anyway). I have been using VS Code for a couple of years and I really really love it.

I love this editor because it has a really good performance (at least I don’t have any issues so far), it is free and you have a lot of extensions available to install. These extensions can make a difference in your everyday work and of course, make your editor look awesome!

![](https://cdn-images-1.medium.com/max/1024/1*QD7srEXJUpS8KSuRu8WJhg.png)<figcaption>Just a screenshot of my favorite text editor</figcaption>

I will share with you what is my top 5 extensions for VS Code. You will find two that are only useful if you write Javascript code, which I do... And I love to!

### Extensions

[**GitLens**](https://github.com/eamodio/vscode-gitlens)

If you are working on a project that uses git as the VCS (Version Control System) you will love this one. This basically tells you who made a given change in the line your cursor is on. It shows you the commit message and the user who made the change.

![](https://cdn-images-1.medium.com/max/858/1*f46Iy-ZRSL22GdaAjYepDQ.gif)<figcaption>Using gitlens to see commit messages line by line</figcaption>

This extension also adds a new option in the left side menu where you can see in great detail, the commit logs, compare files, see branches, etc.

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

[**vscode-icons**](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)

This one is also for pretty much any kind of software developer. It is nothing more than a icon package. Let me show you an example…

![](https://cdn-images-1.medium.com/max/406/1*cSTfrWStf9cmGh_nzlNj3Q.png)<figcaption>Example of how icons appear using vscode-icons extension</figcaption>

As you can see, it does a lot more than just looking at each file’s extension and use the right icon. Some files don’t even have an extension in the file name, for instance, the “LICENSE” file. But somehow, the extension uses a different icon for this file, even though it is just a text file. The “Dockerfile” got its own icon too! It really is more than just an icon theme for your text editor!

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

Sometimes you have a lot of “_(_“ and “_{_“ and it’s hard to find the corresponding “_)_” and “_}_” closing characters. I use this extension to solve this first world problem. It applies a different color for each pair of “()” and “{}”.

![](https://cdn-images-1.medium.com/max/922/1*6p_Zzisd3glWVHBy1rAx4Q.png)<figcaption>Each pair of “()” and “{}” gets a different color</figcaption>

Awesome, right?

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

[ESLint](https://eslint.org) is a tool to specify code standards. Some questions like:

- Should I put a space around the “=” in an assignment?

```javascript
const a = b;
```

or

```javascript
const a=b;
```

- Should I leave a white space between the _if_ keyword and the condition in an _if_ statement?

```javascript
if (condition) //...
```

or

```javascript
if(condition) //...
```

And much more, can be answered by this tool…

All of these code standards can be defined and enforced by ESLint. You just need to integrate this tool in your project and set your rules in a `eslintrc` file. Your build tool will raise an error if some rule is being broken. But you can do better. You can have all those errors popping up in your VS Code. There’s an extension that does just that. It looks for a configuration file and as you type, your text editor highlights errors that break the rules. Some of these errors can be automatically fixed. Just press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (on a PC) or <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on a Mac and type “fix” until you find an option that says “_Fix all auto-fixable problems_”.

![](https://cdn-images-1.medium.com/max/940/1*6MQHAAbiDLkV84sqHezBeA.gif)<figcaption>Using auto fix to fix code standard issues</figcaption>

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

When you import something from a package, it means you are including some external code. If you have a build process in place that generates a bundle file (all code in just one JS file), each library you use will increase final bundle’s size. With this extension, each import statement is evaluated and it tells you what is the cost of that import, in terms of file size. Because here… The size matters!

![](https://cdn-images-1.medium.com/max/730/1*n6WqZM8glgh4xHCY-YOLSQ.png)<figcaption>Just an example of Import Cost extension in action</figcaption>

### Conclusion

It’s not obvious the benefits of the extensions I showed you in this post… Until you start using them! Even if some of them just solve some first world problems, I think all of them added value to my text editor and also to my everyday work. I hope you can get something awesome from this post.

Do you use VS Code? Any other editor, like `vim`? What extensions do you use? Share in the comments your top 5 extensions for your editor of choice!