VS Code extensions I always use
Tags: vscode, webdev, beginners, productivity
Published: 2022-12-19 18:37:22

If you are working with JS, chances are that you are already using VS Code. It is the most popular editor for JS development. Some of the reasons why VS Code is so popular is the fact that it costs nothing - completely open source, easy to use, fully customizable, really fast and a joy to work with.

Since VS Code is so popular there are many extensions created to extend its functionality. From so many extensions available to you it might be hard to choose which ones to use. I decided to make a list of extensions I always use on every JS project no matter the requirements.

This list of extensions is not based on a particular JS framework or library like _Vue_ or _React_, so no snippet extensions, but rather on extensions that every JS developer might find useful.

To make it easier, I have decided to group extensions into two categories, _UI Extensions_ and _Utility Extensions_.

## UI Extensions
Under this category, I will mention extensions that actually change the appearance of _User Interface_ inside VS Code. They will make your editor stand out and look much nicer than the default you get after installing VS Code, even though the default one looks pretty good to begin with. After all, having a nice working environment is really important for productivity.

### Atom One Dark Theme
For me, there is no better dark theme than [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark). It is just perfect in any way. Nice color scheme, good contrast between colors, nice to look at, it basically ticks all the boxes for me. There is a reason why this extension has more that **3.8M** downloads, at the time of writing.

This is of course highly opinionated. There are many other good dark themes that could be a better fit for you. I would say, If you don't like this theme, go ahead and try the others until you find something you like. To know what fits you the best you need to try it first.

### Atom One Light Theme
I personally do not use light themes often. But there are some situations that I can find myself in where a light theme is better suited than the dark one.

I work for a company that has large open offices with a lot of natural light. When working in a bright environment, like this, it is much easier to read text/code when using a light theme.

When a light theme is needed, I go for [Atom One Light Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight) just because of the similarities with [Atom One Dark Theme](#atom-one-dark-theme).

> To quickly switch between themes, hit **Command/Ctrl** + **K** + **T** to open the _Theme picker_ where you can select the desired theme.

### VS Code Icons
When it comes to icons I always go for [VS Code Icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons). It is very popular extension as well with over **12.5M** downloads.

This extension has a large collection of images for basically every file type and even some specially named directories will have a dedicated icon.

> To quickly switch between icon themes, hit **Command/Ctrl** + **Shift** + **P** to open the _Command Palette_. Type _"icon theme"_ and select the first option. _Icon Theme picker_ will show up where you can select the desired icon theme.

## Utility Extensions
Let's take a look at non-ui extensions. These extensions should actually help to make you faster and write better code. There are a lot of different kinds of extensions under this category, but for sake of simplicity, I just call them utility extensions.

### Auto Rename Tag
This extension is really simple, it only does one job. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) will automatically rename paired HTML/XML tags. Job it does may seem trivial, but this extension is really a time saver.

### DotENV
More often than not, your projects will require `.env` files where _Environment Variables_ can be provided. This is probably more important to people that are working on _Node.js_ applications, but also modern frontend frameworks might require it.

To bring syntax highlighting for `.env` files, in VS Code, you can use [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) extension. After installing extensions, all your `.env` files should have proper syntax highlighting.

### ESLint
This is one of the most popular extensions on the VS Code marketplace and for a good reason. [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) integrates [ESLint](https://eslint.org/), the most popular JS linter, into VS Code.

For this extension to properly work, you need to have the `eslint` npm package installed in your workspace or globally on your machine.

I would recommend always installing `eslint` into workspace rather than doing it globally. Navigate to your project/workspace and run the following command.

```bash
npm install -D eslint
```

Command will install `eslint` as a dev dependency. You can fine tune how JS linter integrates with your project by creating a `.eslintrc.js` configuration file. Find out more information about it on the [official website](https://eslint.org/docs/latest/user-guide/configuring/configuration-files).

### Prettier
Another very popular extension is [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). It is an opinionated code formatter that enforces consistent code style throughout the whole project.

You might wonder, why would I need a code formatter if I write code in a consistent way?  
If you work alone on the project and you don't really care if your code is consistently formatted or not, you can get by without it.

Where `prettier` really shines is when you make your project open-source, to allow more people to contribute, or when you work in a team.

No one writes code in the same way. You can put `;` at the end of the line, but someone else will leave it out. This is where `prettier` comes into play, to fix those kinds of inconsistencies.

This extension requires the `prettier` npm package to be installed. Although it can be configured to work with global installation of `prettier`, it is recommended to use local installation. Navigate to your project/workspace and run the following command.

```bash
npm install -D prettier
```

Command will install `prettier` as a dev dependency. You can fine tune how `prettier` integrates with your project by creating a `.prettierrc.js` configuration file. Find out more information about it on the [official website](https://prettier.io/docs/en/configuration.html).

### GitLens
One of the best extensions that supercharges VS Code with amazing `git` support is [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens). Feature list is crazy long and it really helps better understand what is going on especially if working in a team.

However, if you do not need most of the features that GitLens provides, I would recommend using different `git` related extensions that might be simpler to work with.

### npm Intellisense
When working on a JS project, chances are that you will have a lot of third-party packages installed. To make it easy to import all those modules, you can use [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense).

This extension has one job. It will autocomplete npm modules in import statements. You just need to start typing the name of the module you want to import and extension will provide you with best matching suggestions.

### Thunder Client
Sooner or later, you will have to test some API and check which kind of data it returns and how it behaves. Before, the most popular tool for this kind of job was Postman, but now you can do it straight from VS Code itself without installing a dedicated application.

[Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) is the REST API client that I always use. It is lightweight, has a simple to use interface and really easy to work with.

### Tabnine
Let's finish this list with [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode). This is an AI code assistant that, essentially, does code completions. 

Personally, in the beginning I was a bit skeptical about AI assistants, but this one turned out to be pretty good. I can genuinely say that it does help save some time with code completions that it provides.

There is also a Pro version and this one is, obviously, not free. The Pro version is much more powerful and has more useful features.

## Conclusion
VS Code is an amazing editor with a lot of features, but what makes it special, in my eyes, is the extensions marketplace. There are so many third-party extensions out there created for almost anything.

I have listed my favorite extensions that I always use, on every project. However, based on the project, I usually install additional extensions which are, most of the time, project specific. If you do the same, make sure to remove unused extensions after. It can make VS Code a bit faster.

---

Check out other articles on [my blog](https://ramomujagic.com/blog/).