15+ best & essential VS Code extensions for JavaScript development

Visual studio code provides an amazing environment for development; especially for JavaScript developers. This free of cost cross-platform text editor was introduced by Microsoft and has managed to attract a large number of developers because of its better performance & long listed amazing features. Moreover Microsoft provides VS code’s new updates every month with the inclusion of various new features and useful stuffs.
VS code’s one of the prime attraction is its extension adding capability, and not only one can download and use the required extensions but if needed can create their own custom extensions too. The flexibility with the extension using is tremendous. 7,00,000 downloads per month. I think the number shows it all.
Learn more about the extension uses from VS code’s official website.
Well, in this article i will be providing you a list of best extensions of VS code useful for javascript development.
Before that, let me put a clear vision of extension to the novice users.

What is extension?

An extension (or plugin) is an external component (a piece of code) having its own features & uses that can be added to a software or program to increase the ability and efficiency of that software or program. All you need to do is download & install.

Adding some particular extension in Visual Studio code will help increase the working ability, easiness & efficiency of the editor. In VS code both downloading & installing of a particular extension gets done in just one click.

How to add extension in Visual Studio code:

Definitely simpler than you may think. All you need to do is search, select and install.
Step 1: Open your VS code and click on the extension icon located at the left side bar. Yes the last one with square shape. Or just press Clrt+Shift+x (Command + Shift + x for mac).
Step 2: Now will see a search bar. Write the extension you are looking for and you will be provided with a clear list of related extensions.
Step 3: Click on the install button to install the extension.

You can find all the needed description & the way of using with the extension and even can enable and disable the extensions according to your need.

Okay. So ending the side talks here. Below all the necessary extensions for a javascript developer has been listed. Let’s take a look.

Extensions reducing your tensions

Well i didn’t planned to give such heading, just came out with the flow while writing. Justifies though. HaHa!

Git blame

As the name suggest, you can blame someone for the task doing. Git blame is very useful extension specially when a bunch of people are working in the same project. For an example if 3 people are making changes in a code base, git blame will help keeping track about the changes. Who did the change, when did- all the necessary information can be found very easily using this extension.

Features

  • Easy to keep track about the person who did the change in the git repository.
  • Information is provided only by hovering the cursor.

Intellisense for CSS class names

Intellisense, a Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the CSS class definitions that can be found in your workspace or in external files referenced through the link element.

Features

  • Gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the in types listed in the Supported Language Modes section)

  • Supports external stylesheets referenced through link elements in HTML files.

  • Command to manually re-cache the class definitions used in the autocompletion.

Supported Languages

  • HTML
  • Razor
  • PHP
  • JavaScript
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Vue (.vue) [requires octref.vetur]
  • Twig
  • Markdown (.md)
  • Embedded Ruby (.html.erb) [requires rebornix.Ruby]
  • Handlebars
  • EJS (.ejs)

JavaScript (ES6) Code Snippets

Snippet is a programming term that suggests a small region of re-usable source code, machine code or text.
This extension contains code snippets for JavaScript in ES6 syntax for VS Code editor. JS Code Snippets supports both Javascript & Typescript.

js snippett

Features

  • Saves time & reduces chances of syntax error.
  • By using this extension one can import & export modules.
  • Can get help for class building.
  • Different methods are also available to make coding easier.

Supported Languages

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)

Code Runner

Code runner is a very useful extension for VS code. The lets you run a particular portion of a code. If you want to taste a particular block of code from a huge code base, code runner will help you do so.

Features

  • Lets you run a particular block of code, so you don’t have to run the whole code for some particular purpose.
  • Run code file of current active Text Editor.
  • Run selected code snippet in Text Editor.
  • Run custom command.
  • Stop code running.
  • View output in Output Window.
  • Set default language to run or select language to run.
  • Support REPL by running code in Integrated Terminal.

Supported Languages

  • C
  • C++
  • C#
  • Java
  • PHP
  • Python
  • Javascript
  • Perl
  • Rubby
  • Go
  • Lua
  • Apple Script and many more like,

Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, and custom command.

Document This

Documentation is an integrated part of coding. “Document This” is a Visual Studio Code extension that automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.

Features

  • Very easy and time saving documentation process.
  • Supports JSDoc and Closure Compiler tags: @class, @description, @enum, @export, @function, @implements, @interface, @param, @private, @returns, @static, @template, @type and @memberOf.

ES-Lint

Code linting can be define as a frequently used static analysis helping find problematic patterns or code that doesn’t adhere to certain style guidelines. Though most of the programming language comes with code linting and sometimes compilers incorporate linting into the compilation process.
Basically ESLint was developed to allow developers create their own rules of linting.

Features

  • Developers can create their own linting rules.
  • ESLint requires Node.js and works on Windows, Mac and Linux.
  • Makes coding more productive.
  • Rules in ESLint are grouped by category to help you understand their purpose.

Auto Import

A very useful extension helps finding parses automatically and provides code actions and code completion for all available imports. Auto Import works with Typescript and TSX.

Features

  • filesToScan – Glob for which files in your workspace to scan, defaults to ‘*/.ts’
  • showNotifications – Controls if the annoying notifications should be shown, defaults to false.
  • doubleQuotes – Use double quotes rather than single.
  • spaceBetweenBraces – Difference between import {test} and import { test }
  • autoComplete – Adds found items to intellisense and automatically imports then.

Search Node-Modules

A very simple VS Code plugin allowing you to quickly navigate the required file inside your project’s node_modules directory. Try Search Node-Modules today.

Features

  • Quickly navigate and open files in node_modules by traversing the folder tree.

Path Intellisense

Does small but useful tasks. Surely this plugin does something related to the path, as the name ‘Path Intellisense’ suggests. Well, yes. It is a Visual Studio Code plugin that autocompletes filenames.

Features

  • Autocompletes file names, you don’t need to remember all the file names exactly.

Wallaby.js

In short, an integrated continuous testing tool for JavaScript, increasing the efficiency & perfection by providing an instant feedback from your tests as you write your code, irrespective of the size of the codebase. Wallaby.js uses smart dependency analysis to only execute tests affected by your code changes and leverages parallel test execution.

It also displays test execution results, including code coverage, right in your code editor. No context switching, no need to switch to browser – it’s game changing. The tool pays for itself very quickly and is bringing you to a whole new productivity level.

Note: After the free trial pack you need to pay some bucks to use further.

Features

  • Increases efficiency by helping write perfect code.
  • Doesn’t depend on the codebase size.
  • Parallel test execution.
  • No need to switch to browser.

Prettier – JavaScript formatter

You can easily format your Javascript / Typescript / CSS using Prettier. It’s a must have extension for your VS code.

Features

  • Helps maintain certain rules and regulations set by the developer.
  • Increase readability.
  • Works automatically.
  • Plenty of customizing options.

Minify

Minify your js, css and html files to save transmit bandwidth. Minify for VS Code. Minify with command, and (optionally) re-minify on save.

Features

  • Save transmit bandwidth.
  • Folders containing Javascript and CSS file can be minified to a single file.

Some additional extensions

Some useful additional extensions have been mentioned below.

Angular 1 JavaScript and TypeScript Snippets

This extension for Visual Studio Code adds snippets for Angular 1 for JavaScript and TypeScript. Simple and very easy to use extension. All you need to do is type part of a snippet, press enter, and the snippet unfolds.

Features

  • Adds Snippet for Angular 1 for Js & Ts.

React Redux ES6 Snippets

This extension for VS code React and Redux snippets to assist with boilerplate and structuring of components, written with ES6.
Type part of a snippet, press enter, and the snippet unfolds.

Features

  • Adds snippets for React and Redux using ES6 for JavaScript.
  • Camel Cased identifiers allows for abbreviations.
  • Supports both .js and .jsx file extensions.

open-in-browser

open-in-browser was developed to get preview of your html file in your browser, firefox & google chrome & IE.

Features

  • Makes testing easier.
  • If you want to preview html in your default browser directly, all you need to do is type Ctrl+K D.

TODO Highlight

highlight TODOs, FIXMEs, keywords, or any annotations in your VS code.
Sometimes we may forget to review the TODO’s or before publishing the code we might need to think for hours to make sure all the TODO’s has been reviewed, only if you do not have TODO Highlight. This extension will surely reduce this headache for you.

Features

  • Works as a perfect reminder.
  • highlight TODOs, FIXMEs, and any keywords, annotations.
  • Doesn’t effect the readability.
About This Author

Exploring the web. In love with javascript & frontend development. Creative & Poorophobic.