Top 10 Must-have VS Code Extensions for JavaScript Developers

| July 6, 2020

JavaScript is one of the most popular programming languages, with different components, frameworks and tools. One of the most popular is Visual Studio or VS Code, a lightweight code editor. It borrows heavily from other popular editors, such as Atom and Sublime Text.

Visual Studio’s success comes mainly from the ability to provide stability and performance. Additionally, it provides much-needed features, including IntelliSense, that were available only in full-sized IDEs such as Visual Studio 2017 or Eclipse.

Visual Studio Code’s power comes from the open-source community as it is now able to support almost every programming language, development technology and framework. Additionally, the library supports syntax highlighting, IntelliSense and Emmet features, and snippets.

The Visual Studio Code Extensions—By Category

Snippet Extensions

Visual Studio Code, when installed for the first time, comes packed with built-in snippets for JavaScript, as well as TypeScript. The snippets help to write repetitive code more efficiently.

Consider using this configuration to make snippets shows:

The following are some of the most popular JavaScript snippet extensions.

1. StandardJS JavaScript code snippets: StandardJS JavaScript code snippets are great for developers who opt for a StandardJS convention style. The snippets have no semicolons.

2. The JS Code snippets: The JS Code snippet is the most popular with more than three million installs at present. It has an ES6 syntax for JavaScript, HTML, React, TypeScrip. All of the snippets have a final semicolon.

3. Nathan Chapman’s JavaScript Snippets. A collection of JS snippets with around 33,000 installs. The extension provides support to BDD Testing Frameworks, namely Jasmine, Mocha, and Node.js.

4. The JavaScript Standardjs Styled Snippets by Capaj. This popular standard snippet has 72,000 installs. Originally from Atom StandardJS snippets, the snippets support JavaScript, React, and TypeScript.

5. Atom JavaScript Snippet made by Saran Tanpituckpong. With more than 26,000 installs, the snippets were ported from atom/language-JavaScript extension.

Linter Extensions

Linters are used to compare the code through choosing a popular style or as a configuration file for rule customization. The Visual Studio Code does not have an in-built JS linter so an extension is needed. Some of the available extensions are:

JSHint. With more than a million installs, JSHint requires a .jshintrc configuration file.
ESLint. ESLint is the most popular, with over eight million installs. ESLint requires packages and plugins to be installed. You also have to specify rules for an .eslintrc which the extension will use for linting code.
JSLint that offers a JSLint library linting. You must either locally or globally install the jslint. It has more than 109,000 installs at present.
Standard JavaScript Style. With more than 259,000 installs, Standard JavaScript Style integrates JS Standard Style to VS Code. The standard or semiStandard must be installed as the dev dependency on your task or project. You won’t need a configuration file as you just need to disable the built-in validator of the VS Code.

Syntax Highlighting Extension

The latest Visual Studio Code now is more in line with Atom grammar standards for better colorization syntax support. Extensions like JS Atom Grammar are not needed anymore.

Nonetheless, there are still some syntax highlighting and file extensions useful to certain projects. A few of them are:

DotENV. With more than 833,000 installs as of date, DotENV provides support for environments setting syntax highlighting.
The Bracket Pair Colorizer 2. With over 730,000 installs, it highlights colors matching brackets to help in identifying the block the bracket belongs to.
Babel JavaScript. With more than 550,000 installs, Babel JavaScript provides a syntax highlighting for ES201, FlowType, JS, and GraphQL code.

The Node Package Management Extensions

Every JavaScript project must be on an npm package. Some VS Code extensions help work to easily manage npm packages include:

NPM by Egamma: With more than 2.3 million installs, it uses package.json for validating installed packages and provides clickable options if anything goes missing or if there are mismatched versions to fix. You could run npm scripts defined in the package.json inside the editor.
Path Intellisense extension: With more than 2.7 million installs, it autocompletes filenames and works within CSS and HTML files.
NpmIntelliSense. With more than 1.9 million installs, NpmIntelliSense provides autocompleting npm modules in import statements.

Vide Node package: With over 55,000 installs, Vide Node package, enables viewing a Node package source as well as documentation quickly while working with code.
Node Readme extension: With over 52,000 installs, it allows opening npm package documentation directly in the Visual Studio Code editor as another tab.
Node exec extension: With more than 168,000 installs, it allows present file execution or the code chosen with Node.js by pressing F8. Also, you could abort a running process by pressing F9.
Import Cost. With more than 562,000, Import Cost displays the amount of disk space a package will use upon import.
Search node_modules. With more than 470,000 installs, the folder, by default, is excluded from the built-in search of VS Code. It allows navigating and opening files in node_modules fast via the folder tree.

The Formatting Extensions

Sometimes, we write code that does not align with the rest of the code. You have to go back to fix the indentation in every line and ensure that tags and braces are formatted correctly in a readable format. The process could get tedious. Instead, use extensions to help speed up the process. Keep in mind that Beautify and Prettier extensions cannot be simultaneously active.

Beautify. Beautify is an extension of jsBeauitifier and supports JSON, JavaScript, HTML, and CSS. Customization could be done via a .jsbeautifyrc file. To date, it has 4.4 million installs – the second most popular formatter at present.

JS Refactor extension. It utilizes refactor for JS code, such as extracting variables/methods, converting existing code to use template literals or arrow functions, and exporting functions. To date, it has more than 140,000 installs.
Prettier Code Formatter. The most popular extension supporting JavaScript, formatting, and CSS and TypeScript. It’s recommended installing it as a dev dependency locally. It has more than 5.7 million installs.
JavaScript Booster extension. Its features include several coding actions, like converting var to const or let, merging initialization and declaration, and removing redundant else statements. It has more than 74,000 installs.

Framework Extensions

For most of the major frameworks, VS Code provides support via extensions. There are, however, several established frameworks that have no complete development extension yet. Some of the VS Code extensions that provide considerable functionality are the following:

Angular 8 Snippets. Angular 8 Snippets has snippets for Angular version 2 to 7, as well as 8 Beta. It supports HTML, TypeScript, PWA, Flex Layout, and Angular Material ngRx. It has 242 Angular snippets and more than 1.35 million installs.
Angular Snippets version 9. With more than 1.7 million installs, it’s the most popular snippet extension for AngularJS developers. It has snippets for RxJS, TypeScript, Docker files and HTML.
React Native tools. React Native tools provides IntelliSense, debugging and command features for projects of React Native. To date, it has more than 1.2 million installs.
React-Native/Redux/React snippets. It has ES6/ES7 React syntax snippets, storybook in ES6/ES7, Redux, and React Native with over 371,000 installs.
Vetur extension. Vetur extension provides syntax highlighting, Emmet, linting, snippets, IntelliSense, formatting, and debugging support for Vue. It has the documentation published on GitBook, with more than four million installs.
ES7 React/GraphQL/React-Native/Redux snippets. It has snippets for JS and TypeScript, Redux, Graphql, and React with an ES7 syntax. The extension has more than one million installs.
The Cordova Tools. The Cordova tools have support for Cordova plugins and framework. It provides IntelliSense, debugging, as well as other Cordova-based projects features. To date, it has more than 272,000 installs.
Ember. With more than 18,000 installs, Ember has common support and IntelliSense for Ember. All ember cli commands are available via the own command list of the VS Code after installation.
jQuery Code Snippets. It has jQuery code snippets of over 130,000. With more than 700,000 installs, it is activated by the prefix jq.

Browser Extensions

Unless you are writing a console program in JS, you will likely execute the JS code within a browser, meaning you have to refresh the page often to see every code update. Rather than manually doing this, here are several tools that could minimize the time to develop the iteration process.

Chrome Debugger. With over 5.2 million installs, Chrome Debugger allows you to debug Chrome code or any other target that supports Chrome Debugger protocol.
Live Server. Live Server enables you to launch a local developer server with a live reload feature for both dynamic and static pages.
PHP Server: While the PHP Server was originally created for PHP projects, it is still useful for testing client-side only JS code. To date, it has more than 234,000 installs.
Web Server Preview: Web Server Preview provides a web server as well as a live HTML preview. The feature can be called from the editor or the context menu. It has over 120,000 installs.
Rest Client extension. Rather than using a browser or a CURL program for testing REST API endpoints, the Rest Client Extension tool could be installed to run HTTP requests within the editor.

Testing Extensions

A vital component of software development is testing. The following are some of the popular VS Code extensions for testing.

ES6 Mocha Snippets. It provides the ES6 syntax with Mocha snippets. It focuses on keeping code dry, omitting curlies by if possible and leveraging arrow functions. It can be configured to enable semicolons. It has more than 36,000 installs.
Jasmine Code Snippets. With over 30,00 installs, the extension offers the Jasmine test framework code snippetsThis framework has not been updated in the past three years.
Mocha sidebar snippet. With the Mocha library, it provides testing support to directly run tests on code and reveals errors as decorators. It has several unresolved issues.
Protractor Snippets. Protractor provides end-to-end testing snippets. With more than 18,000 installs, it supports JavaScript as well as TypeScript.
Note TDD. Note TDD provides support for JavaScript and Node projects that are test-driven. It can trigger automatic test build whenever sources are updated.

The Awesome Extensions

Paste as JSON. With more than 420,000 installs, it enables a quick conversion of JSON data to JS code.
Quokka.js: With more than 641,000 it is a debugging tool that provides JavaScript code prototyping.
Code Metrics. With more than 233,000, Code Metrics help with code calculation complexity in JS and TypeScript.

The Extension Packs

The Visual Studio Code marketplace also has a category for extension packs. These extension packs are collections of related Visual Studio Code extensions packed into a single package for an easy installation.

Visual Studio Code for Node.js. It has an NPM IntelliSense, ESLint, Docker, Code Metrics, Chrome Debugger, and Import Cost.
The Vue.js Extension pack: , It is a collection of both JS and Vue extensions. At present, it has around 12 VS Code extensions,, including auto-close-tag and the auto-rename-tag. To date, it has more than 156,000 installs.
Nodejs Extension Pack. With more than 293,000 installs, it contains, npm, ESLint, Search node_modules, JS snippets, Path IntelliSense, NPM IntelliSense.
Ionic Extension Pack. It contains several VS Code extensions for Angular, RxJS, Ionic, HTML, and Cordova development. To date it has over 75,000 installs.

Javascript APM

If you’re using javascript, you should also keep an eye out for Stackify’s new client-side monitoring that will be released in 2020. Learn more. This real user monitoring is the only way for you to see the full story of your code and how users are engaging with your applications.

Summing Up

The Visual Studio Code has many quality extensions, which make it a popular option for developers of JavaScript, as well as developers of Vue, ReactJS, and Node.js. Writing JS code efficiently has never been easier with these extensions. Extensions such as the ESlint help developers steer clear of common mistakes, while the Debugger for Chrome helps make code debugging easier.

The Node.js extensions, with IntelliSense features, help correctly import modules. The availability of tools like the REST client and Live Server lessens relying on external tools to complete a project. VS Code is great for adding new themes and features. The VS code is lightweight, fast and extremely powerful. Microsoft designed it as a cross-platform code editor used to write web apps as well as cloud apps.

The main reason why VS Code is so popular is that it has everything that a programmer could expect from any code editor, with additional useful features as well.

Improve Your Code with Retrace APM

Stackify's APM tools are used by thousands of .NET, Java, PHP, Node.js, Python, & Ruby developers all over the world.
Explore Retrace's product features to learn more.