This article was published 3 years ago, therefore the contents of this post may be out of date.

Visual Studio Code (VSCode) is a lightweight but powerful cross-platform source code editor that runs on your desktop.

Thankfully extensions for VSCode are here to make our lives less stressful, but these extensions can help us be more productive, efficient, and even helps us to become better developers by learning practices that have been already used by earlier generations of developers.

Other than having snippets, hot-reload, autocomplete, there are also many extensions available across various programming languages, and including JavaScript’s popular frameworks such as React, Angular, Vue, and more. These JavaScript Extensions been created to help us speed up our development work, so we can focus more on other things such as solving problems that we come across.

Snippets

JavaScript ES6 Code Snippets

Javascript (es6) Code Snippets

This is currently the most popular javaScript snippet extension with over 3+ million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue. All snippets include a final semicolon.

Vue VSCode Snippets

Vue Vscode Snippets

These snippets were built supercharge a workflow in the most seamless manner possible. This repo was built particularly for real world use. It doesn’t catalogue the API definitions, rather, it focuses on developer ergonomics from the point of Vue of real world use.

Included in this extension are the pieces that Sarah Drasner the publisher of this extension personally get sick of typing, and boilerplate that is helpful to stub out quickly and this extension supports Vue 2 and Vue 3.

Angular Snippets (Version 13)

Angular Snippets (version 13)

This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.

ES7 React/Redux/GraphQL/React-Native snippets

Es7+ React Redux React Native Snippets

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

JavaScript Snippet Pack

Javascript Snippet Pack

A snippet pack to make you more productive working with JavaScript. Based on Visual Studio extension by Mads Kristensen, which is based on Atom snippets. This extension ships a bunch of useful code snippets for the JavaScript and TypeScript editors.

Vue.js Extension Pack

Vetur

Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.

JavaScript StandardJS Styled Snippets

Javascript Standardjs Styled Snippets

Optinionated set of JS snippets. Originally forked from https://github.com/gaboesquivel/atom-standardjs-snippets, but we’ve added couple more. Also these are not using special characters because vscode doesn’t accept them in the snippets.

ES6 Mocha Snippets

Es6 Mocha Snippets

Mocha snippets for Visual Studio Code using ES6 syntax. The focus is to keep the code dry leveraging arrow functions and omitting curlies by where possible. The snippets use the Mocha function names for ease of memory that way you don’t need to learn new names.

JS CodeFormer

Js Codeformer

JS CodeFormer is a JS refactoring and code automation extension for VS Code. Born from the ashes of JS Refactor, JS CodeFormer answers a new question. Instead of asking “can a JS refactoring tool be made for VS Code”, this project aims to answer “how can better tools help to create better software?”

JS CodeFormer is a suite of tools purpose built to simplify the process of creating and editing software in a JavaScript environment.

Formatting and Type Checking

Prettier

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Vetur

Vetur

This is the most useful plugins for Vue.js development. This extension is specific to vue.js development. It has Syntax-highlighting, Snippet support, Formatting, lots of Framework Support and more.

React Native Tools

React Native Tools

This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run react-native commands from the command palette.

Sort Typescript Imports

Sort Typescript Imports

Sort import statements in Typescript code

Linters

JSHint

Jshint

The extension looks for a jshint module in the current directory and in the global package location. You can install jshint locally with npm install jshint or globally with npm install -g jshint. If your jshint module is in a different location, use the jshint.nodePath setting to specify the correct path. The jshint.packageManager setting can be used to specify which package manager you are using, npm or yarn.

ESLint

Es Lint

ESLint is a smart-static code that can find out any problematic patterns, you can even make your own set of rules to check and reuse logic. ESLint is one of the tools that will ensure that the developers will have a good quality code format.

IntelliSense

npm Intellisense

Npm Intellisense

Visual Studio Code plugin that autocompletes npm modules in import statements.

Path Intellisense

Path Intellisense

Path Intellisense is a must-have VSCode extension, for those who are working on a large project, its main function is to autocomplete the path of the file you are trying to import, it will automatically show up as you type in.

Alpine.js IntelliSense

Alpine.js Intellisense

Simple IntelliSense & Snippets for Alpine.js framework.

TypeScript Importer

Typescript Importer

Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion item to allow code completion.

Debugging

Live Server

Live Server

This extension will be responsible to help automatically reload the web-page whenever there’s a changes in your code through VSCode, without you having to reload your web-page over and over, it saves a lot of time, to use this you can just click the Open with Live Server.

Debugger for Firefox

Debugger For Firefox

Debug your web application or browser extension in Firefox

Microsoft Edge Tools for VS Code

Microsoft Edge Tools For Vs Code

This extension allows you to use the Developer Tools of Microsoft Edge inside Visual Studio Code.

JavaScript Debugger Companion Extension

Javascript Debugger Companion Extension

A companion extension to js-debug to enable remote Chrome debugging.

Productivity Tools

NPM

Npm Intellisense

This NPM extension is here to helps you out whenever there’s an issues with the package is missing, mismatched versions, the npm extension will notify you via a clickable option to fix the certain issue.

ToDo Tree

Todo Tree

This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.

Settings Sync

Settings Sync

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

Indent Rainbow

Indent Rainbow

This extension colourises the indentation in front of your text alternating four different colours on each step. Some may find this extension quite helpful while writing code for Nim or Python.

REST Client

Rest Client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

Git History

Git History

View git log, file history, compare branches or commits

JavaScript Booster

Javascript Booster

This VS Code extension provides various code actions (quick fixes) when editing code in JavaScript (or TypeScript/Flow). Just note the light bulb at the left and press it to learn how you can transform the code under the cursor.

Share

31 VSCode Extensions For JavaScript Developers