9 Great JavaScript Extensions for Visual Studio Code to Speed Up Your Development

Who wants to code faster and easier?

Amy J. Andrews
May 17 · 4 min read

Do you know what makes a great code editor?

For me, those are the extensions it provides.

I have used many code editors. But when it comes to extensions, I have to say VSCode is a great editor with many amazing extensions.

And if you are using VSCode, here are the extensions that you should install.

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

My life is a mess, so I don’t want my code to be that messy. That is why I use ESLint for all my projects.

ESLint is amazing in keeping your code unified and organized. It’ll check your code style, find bugs related to using variables such as undeclared variables or use of undefined variables. That’s how quality code is built.

In short, if you want your code to be clean, you should use ESLint.

Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

I usually debug using console.log() before. Well, it’s a common way to debug but not the best way. To know how the code works, you must put console.log() everywhere. Sometimes it makes your code become a mess.

The best tool I know is Chrome debugger built-in tools. Now, you can use it directly in VSCode by installing Debugger for Chrome.

This tool provides almost every feature of the chrome debugger. This means you don’t need to open Chrome, you just debug directly while coding with your beloved VSCode editor.

Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Quokka is a great way for you if you want to do a quick test for a function right inside your editor without using other tools like Chrome Developer Tools.

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

When working in a team, maybe everyone has their own coding style. That is hard to keep the code consistent.

Prettier is a way to create a style standard for everyone to follow. The best part: you don’t have to format by yourself. You just need to define a coding style standard and leave the rest for your editor. Yes, it formats your code automatically.

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Importing a package/module in an innocent way will make your project size bigger. This is not good at all.

The Import Cost will help you check the size of an imported package by displaying inline the size of the package. As a result, you will consider whether to use that package or use another package so that the size of the project is as small as possible.

GitLens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Do you want to know who modified your line of code inside VSCode editor? You should use GitLens.

You can also use GitLens to view all the changes from a source file, compare 2 branches, see blame, and beyond.

JavaScript (ES6) Code Snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript), which is what you should use for the modern web development. With just a few keystrokes, you can quickly add ES6 codes to your project.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Remembering exact file paths to reference can be tricky, especially when you’re working with a big project.

Well, Path Intellisense can save your day for that. All you have to do is just typing a path and this extension will complete filenames automatically for you.

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

You change your JavaScript code. You go to your browser and refresh it. Well, it’s obsolete. Because now you have Live Server, which supports live reloading.

With Live Server, you change your code, save it, and that’s it. Check this one out if you want to speed up your writing code.


Certainly, the list of extensions above is not very complete. But they are the ones that I find best so far.

Would you like to add more to this list? Please leave the comment for your favorite extensions below.

Further Reading

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store