10 Must-have VS Code Extensions for JavaScript Developers

In this article, I’ll focus on a list of must-have VS Code extensions for JavaScript developers.

Visual Studio Code is undoubtedly the most popular lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.

The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.

VS Code Extensions by Category

For this article, I’ll focus on VS Code extensions specifically targeting JavaScript developers. Currently, there are many VS Code extensions that fit this criterion, which of course means I won’t be able to mention all of them. Instead, I’ll highlight VS Code extensions that have gained popularity and those that are indispensable for JavaScript developers. For simplicity, I’ll group them into ten specific categories.

Snippet Extensions

When you first install VS Code, it comes with a several snippets for JavaScript and Typescript. Before you start writing modern JavaScript, you’ll need some additional snippets to help you quickly write repetitive ES6/ES7 code:

  • VS Code JavaScript (ES6) snippets: currently the most popular, with over 1.2 million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue extensions.

  • JavaScript Snippet Pack: a collection of useful snippets for JavaScript.

  • Atom JavaScript Snippet: JavaScript snippets ported from the atom/language-javascript extension.

  • JavaScript Snippets: a collection of ES6 snippets. This extension has snippets for Mocha, Jasmine and other BDD testing frameworks.

Syntax Extensions

VS Code comes with pretty good syntax highlighting for JavaScript code. You can change the colors by installing themes. However, you need a syntax highlighter extension if you want a certain level of readability. Here are a couple of them:

  • JavaScript Atom Grammar: this extension replaces the JavaScript grammar in Visual Studio Code with the JavaScript grammar from the Atom editor.

  • Babel JavaScript: syntax highlighting for ES201x JavaScript, React, FlowType and GraphQL code.

  • DotENV: syntax highlighting for .env files. Handy if you’re working with Node.

Linter Extensions

Writing JavaScript code efficiently with minimum fuss requires a linter that enforces a specific standard style for all team members. ESLint is the most popular, since it supports many styles including Standard, Google and Airbnb. Here are the most popular linter plugins for Visual Studio Code:

  • ESLint: this extension integrates ESLint into VS Code. It’s the most popular linter extension, with over 6.7 million installs to date. Rules are configured in .eslintrc.json.

  • JSHint: a code checker extension for JSHint. Uses .jshintrcfile at the root of your project for configuration.

  • JavaScript Standard Style: a linter with zero configuration and rigid rules. Enforces the StandardJS Rules.

  • JSLint: linter extension for JSLint.

If you’d like an overview of available linters and their pros and cons, check out our comparison of JavaScript linting tools.

Node Extensions

Every JavaScript project needs to at least one Node package, unless you’re someone who likes doing things the hard way. Here are a few VS Code extensions that will help you work with Node modules more easily.

  • npm: uses package.jsonto validate installed packages. Ensures that the installed packages have the correct version numbers, highlights installed packages missing from package.json, and packages that haven’t been installed.

  • Node.js Modules IntelliSense: autocomplete for JavaScript and TypeScript modules in import statements.
    Node IntelliSense demo
    Source: vscode-node-module-intellisense

  • Path IntelliSense: it’s not really Node related, but you definitely need IntelliSense for local files and this extension will autocomplete filenames.

  • Node exec: allows you to execute the current file or your selected code with Node.js.

  • View Node Package: quickly view a Node package source with this extension, which allows you to open a Node package repository/documentation straight from VS Code.

  • Node Readme: quickly open npm package documentation.

  • Search node_modules: this extension allows you to search the node_modules folder, which is usually excluded from standard search.
    Search Node modules
    Source: vscode-search-node-modules

  • Import Cost: displays size of an imported package.
    Import cost demo
    Source: import-cost

Formatting Extensions

Once in a while, you find yourself formatting code that wasn’t written in a preferred style. To save time, you can install any of these VS Code extensions to quickly format and refactor existing code:

  • Beautify: a jsBeautifier extension that supports JavaScript, JSON, CSS and HTML. Can be customized via .jsbeautifyrc file. Most popular formatter with 2.3 million installs to date.

  • Prettier Code Formatter: an extension that supports the formatting of JavaScript, TypeScript and CSS using Prettier (an opinionated code formatter). Has over 1.5 million installs to date.

  • JS Refactor: provides a number of utilities and actions for refactoring JavaScript code, such as extracting variables/methods, converting existing code to use arrow functions or template literals, and exporting functions.

  • JavaScript Booster: an amazing code refactoring tool. Features several coding actions such as converting var to const or let, removing redundant else statements, and merging declaration and initialization. Largely inspired by WebStorm.
    JavaScript Booster Demo
    Source: vscode-javascript-booster

Browser Extensions

Unless you’re writing a console program in JavaScript, you’ll most likely be executing your JavaScript code inside a browser. This means you’ll need to frequently refresh the page to see the effect of each code update you make. Instead of doing this manually all the time, here are a few tools that can significantly reduce the development time of your iteration process:

Framework Extensions

For most projects, you’ll need a suitable framework to structure your code and cut down your development time. VS Code has support for most major frameworks through extensions. However, there are still a number of established frameworks that don’t have a fully developed extension yet. Here are some of the VS Code extensions that offer significant functionality.

  • Angular 6: snippets for Angular 6. Supports Typescript, HTML, Angular Material ngRx, RxJS & Flex Layout. Has 2.2+ million installs and 172 Angular Snippets to date.

  • Angular v5 snippets: provides Angular snippets for TypeScript, RxJS, HTML and Docker files. Has 2.7+ million installs to date.

  • React Native/React/Redux snippets for es6/es7: provides snippets in ES6/ES7 syntax for all of these frameworks.

  • React Native Tools: provides IntelliSense, commands and debugging features for the React Native framework.

  • Vetur: provides syntax highlighting, snippets, Emmet, linting, formatting, IntelliSense and debugging support for the Vue framework. It comes with proper documentation published on GitBook

  • Ember: provides command support and IntelliSense for Ember. After installation, all ember cli commands are available through Code’s own command list.

  • Cordova Tools: support for Cordova plugins and the Ionic framework. Provides IntelliSense, debugging and other support features for Cordova-based projects.

  • jQuery Code Snippets: provides over 130 jQuery code snippets. Activated by the prefix jq.

Testing Extensions

Testing is a critical part of software development, especially for projects that are in production phase. You can get a broad overview of testing in JavaScript and read more about the different kind of tests you can run in our guide — JavaScript Testing: Unit vs Functional vs Integration Tests. Here are some popular VS Code extensions for testing:

  • Mocha sidebar: provides support for testing using the Mocha library. This extension helps you run tests directly on the code and shows errors as decorators.

  • ES6 Mocha Snippets: Mocha snippets in ES6 syntax. The focus of this extension is to keep the code dry, leveraging arrow functions and omitting curlies by where possible. Can be configured to allow semicolons.

  • Jasmine Code Snippets: code snippets for Jasmine test framework.

  • Protractor Snippets: end-to-end testing snippets for the Protractor framework. Supports both JavaScript and Typescript.

  • Node TDD: provides support for test-driven development for Node and JavaScript projects. Can trigger an automatic test build whenever sources are updated.
    Node TDD demo
    Source: node-tdd

Awesome Extensions

I’m just putting this next bunch of VS Code extensions into the “awesome” category, because that best describes them!

Extension Packs

Now that we’ve come to our final category, I would just like to let you know that the VS Code marketplace has a category for extension packs. Essentially, these are collections of related VS Code extensions bundled into one package for easy installation. Here are some of the better ones:

Summary

VS Code’s huge number of quality extensions makes it a popular choice for JavaScript developers. It’s never been easier to write JavaScript code this efficiently. Extensions such as ESLint help you avoid common mistakes, while others such as Debugger for Chrome help you debug your code more easily. Node.js extensions with their IntelliSense features help you import modules correctly, and the availability of tools such as Live Server and REST client reduces your reliance on external tools to complete your work. All of these tools make your iteration process far much easier.

I hope this list has been introduced you to new VS Code extensions that can help you in your workflow.

Sponsors