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. 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 just because of the similarities with 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. 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 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 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 integrates ESLint, 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.
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.
Prettier
Another very popular extension is Prettier. 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.
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.
GitLens
One of the best extensions that supercharges VS Code with amazing git support is 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.
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 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. 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.
Top comments (7)
Great extensions. Thank you for sharing! 🙂
Great write. I use some of these extension and I must say you are not exaggerating. LOL.
I will try out the new ones.
Good job.
Glad you liked it.
Also, feel free to share extension you use in the comment.
Auto Rename Tag is completely unnecessary to use. Visual Studio Code have it built in.
You forgot to mention that eslint often conflicts with prettier. eslint-config-prettier should be used when using eslint.
This is not true, since
editor.linkedEditingis not as capable. You still need it inJSXfor example.There is even open issue for it
This post is about VS Code extensions and not how they interact with each other. You can also use different approaches than
eslint-config-prettier.I didn't used JSX much, so I don't know.
Sure, but new users like me will have trouble. So, you should have mentioned that eslint and prettier might conflict.
Well I hope your comment can help someone in similar situation.
I might update the post in future on how to deal with conflicts between
prettierandeslint.