The best Visual Studio Code extensions for JavaScript and Node

VSCode (Visual Studio Code) has exploded in popularity since its first release in 2015 and has now become the editor of choice for many web developers, especially those working with JavaScript on the frontend and Node.js on the backend.

While VSCode already has robust support for JavaScript and TypeScript by default, its community of users has made several extensions that enhance the default feature set, giving it added functionality that very few text editors can match.

Without further ado, let’s explore the some of the best VSCode extensions for JavaScript developers:

Prettier

Prettier makes your life easier by automatically formatting code for you. This helps you maintain a consistent coding style across your various projects and is especially helpful when working in a team or in an open source project where coding styles often conflict.

Now, you can just agree on a specific style with your team members and configure Prettier to enforce your guidelines. You can use Prettier via the command line, but there’s a nifty extension for VSCode that integrates the tool with your editor making it easy to format your code when you save the file you’re working with.

It supports other languages aside from JavaScript such as CSS, SCSS, Vue, TypeScript, JSON and others which makes it a versatile tool for all your code formatting needs.

Quokka.js

Quokka.js brings an alive playground to your editor which is handy for a quick experimentation or when teaching others. It runs your code immediately you type it in and shows you the various execution results inline in your editor without having to open the console.

You can just install the extension for VSCode and start using it right away without fiddling with any setup process. In addition to full support for JavaScript and TypeScript, it can also simulate the browser environment with the help of jsdom.

Snippets

Snippets are an important feature that developers commonly take advantage of to make writing repetitive code much faster. For example, you can type clg and hit the Tab key to produce console.log(). Similarly, thenCatch is expanded to a .then() and a .catch() declaration to a Promise.

There are several snippet extensions for all sorts of languages, frameworks, and libraries. Here are a handful of extensions that should prove useful for you when working on a JavaScript project:

• JavaScript (ES6) code snippets
• Angular v6 Snippets
• React-Native/React/Redux snippets for es6/es7

You can find more snippet extensions for other languages and libraries on the Visual Studio Code Marketplace.

Import Cost

Import Cost shows you the size of an imported third-party package inline in your editor to help you make better decisions about what packages to include in your application so as to avoid shipping massive bundles to your customers.

Auto Import

Auto Import finds all the imports in your file and provides code actions and completion for each one. When working with TypeScript, you can just start using the module and this extension will add the appropriate import statement for you at the top of the file.

Auto Rename Tag

Auto Rename Tag helps you automatically rename paired HTML/XML tags in your project. As soon as you change one tag, the other is updated to match the change. This also works with JSX and TSX so it will prove a very handful for you if you use either syntax to describe the UI of your application.

Auto Close Tag

Auto Close Tag does exactly what the name suggests — it automatically adds the closing tag for HTML/XML tags. Although Visual Studio Code has built-in support for closing tags automatically in HTML files, this extension brings the same functionality for other languages such as Vue, JavaScript, TypeScript, JSX and so on.

Settings Sync

It is often useful to maintain the same configuration for your editor across all machines to keep things consistent. Even if you use just one machine, it is useful to have a process for backing up all your settings so that if something goes wrong, or if you move to a new machine, you can easily restore your preferences with one click.

This is where an extension like Settings Sync helps. It synchronizes your Visual Code settings across multiple instances. This includes your preferences, themes, snippets, extensions and keybindings. It is very easy to use and won’t take you much time to set it up so I highly recommend that you check it out.

Live Server

Live Server helps you spin up a quick development server that automatically reloads your project in the browser as you make changes. This extension not only works with static files, it also auto reloads the browser when you make changes in your server-side code which is super handy for all you Node.js developers.

Wallaby.js

Wallaby.js improves your unit testing workflow in JavaScript, TypeScript or CoffeeScript by running your tests immediately as you type, and printing the execution results inline in your editor similar to how Quokka.js does it. In fact, it’s made by the same team behind Quokka. It also provides beautiful test and code coverage reports that are updated in realtime.

Wallaby.js costs $100 for a single user license, but it offers a free trial period for you to test and evaluate the product.

ESLint

ESLint is the most configurable linter for JavaScript. It helps you detect and fix a common class of errors in your code. It is also useful for enforcing specific coding conventions within a project or team. The VSCode extension integrates the tool with your editor so that you can be warned about potential problems on the fly.

Document This

Document This automatically generates detailed JSDoc comments for both TypeScript and JavaScript files. It comes with full support for JSDoc and Closure Compiler tags such as @class, @description, @enum, @export, @function, @implements, @interface, @param, @private, @returns, @static, @template, @type and @memberOf.

Conclusion

As you can see, Visual Studio Code supports many extension that will help you become more a more productive JavaScript developer. Hopefully, this article has helped you discover some useful tools.