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.

This article was updated in March 2019 to reflect the current state of the VS Code extensions ecosystem.

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 several built-in snippets for JavaScript and Typescript. Snippets help you write repetitive code quickly. However, you may find these are not enough. You can easily create your own, or you can simply install an extension that includes a bunch of new useful snippets.

Here are some of the most popular snippet extensions for JavaScript developers. However, I would recommend you install just one of these for simplicity’s sake.

Syntax Highlighting Extensions

The latest version of VS Code currently supports colorizing of variable and function references. It’s now much more equivalent to the Atom.io editor grammar, so extensions such as JavaScript Atom Grammar are no longer needed.

However, we still have a few syntax highlighting extensions that are useful when it comes to certain projects. Here are a couple:

  • 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

If you have ever gotten into a debate with your teammates over tabs vs spaces or semicolons vs no semicolons, you’ll realize that people have strong opinions about which coding style to use. Nevertheless, everyone needs to use the same coding style in a particular project.

However, it’s quite common for programmers to forget which coding styling they should be using. To enforce the rules, we need to declare standards. You can create your own or just use one of the popular coding style standards such as Standard, Google, or Airbnb. You are free to customize them if there is a specific rule you don’t like.

To ensure your code meets your coding style standard, you will need a linter. Here are the most popular linter extensions for Visual Studio Code:

  • ESLint: You’ll need to install the ESLint library either locally or globally in order to use this extension. You will also need to create the .eslintrc configuration file to configure your rules and a number of settings.
  • JSHint: You’ll need to install the JSHint library either locally or globally in order to use this extension. Use .jshintrc file to configure your lint rules and settings.
  • JavaScript Standard Style: a linter with zero configuration and rigid rules. Enforces the StandardJS Rules.
  • JSLint: a 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 is likely to have 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.json to 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.
  • npm Intellisense: Autocompletes npm modules in import statements.

npm intellisense demo

  • Path IntelliSense: autocompletes filenames. It works in HTML and CSS as well.
  • Node exec: allows you to execute the current file or your selected code with Node.js.
  • View Node Package: quickly view a Node package’s 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 the size of an imported package inside the editor.

Import cost demo
Source: import-cost

Formatting Extensions

We sometimes write code that is out of the alignment with the rest of our code. To fix this, we need to go back and fix the indentation in each line. In addition, we need to ensure braces and tags are properly formatted in a readable format. This process can quickly get tedious.

Luckily, we have extensions that can do the work for us:

  • Beautify: a jsBeautifier extension that supports JavaScript, JSON, CSS and HTML. Can be customized via the .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:

  • Debugger for Chrome: debug your JavaScript easily in Chrome (by setting breakpoints inside the editor).

Debugger for Chrome Demo
Source: vscode-chrome-debug

  • Live Server: local development server with live reload feature for static and dynamic pages.

Live server demo
Source: vscode-chrome-debugvscode-live-server

  • Preview on Web Server: provides web server and live preview features.
  • PHP Server: useful for testing JavaScript code that needs to run client-side only.
  • Rest Client: instead of using a browser or a CURL program to test your REST API endpoints, you can install this tool to interactively run HTTP requests right inside the editor.

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 7 Snippets: snippets for Angular 2, 4, 5, 6,7 and 8 Beta. Supports Typescript, HTML, Angular Material ngRx, RxJS, PWA & Flex Layout. Contains 237 Angular snippets to date.
  • Angular v7 snippets: provides Angular snippets for TypeScript, RxJS, HTML and Docker files.
  • ES7 React/Redux/GraphQL/React-Native snippets: Provides React/Redux snippets in ES7 syntax with Babel plugin features. Contains snippets for JavaScript and TypeScript as well.
  • React Native Tools: provides IntelliSense, commands and debugging features for React Native projects.
  • React-Native/React/Redux snippets for es6/es7: provides snippets in ES6/ES7 syntax for React, React Native, Redux and storybook in ES6/ES7 syntax.
  • 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 wherever possible. Can be configured to allow semicolons.
  • Jasmine Code Snippets: code snippets for the 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!

Paste JSON demo
Source: quick-type

  • Code Metrics: this is another awesome extension that calculates complexity in JavaScript and TypeScript code.

Code metrics demo 1
Code metrics demo 2
Code metrics demo 3
Source: codemetrics

Extension Packs

Now that we’ve come to our final category, I would 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