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

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.

Angular Snippets

This is the most popular snippet extension for Angular developers. It provides Angular snippets for TypeScript, RxJS, HTML and Docker files. At the time of writing, the extension has been updated to support Angular 9.

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.

ES7 React/Redux/GraphQL/React-Native snippets

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

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.

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 Refactor

JS Refactor is the Javascript automated refactoring tool for Visual Studio Code, built to smooth and streamline your development experience. It provides an extensive list of automated actions including the commonly needed: Extract Method, Extract Variable, Inline Variable, and an alias for the built-in VS Code rename.

JS Refactor also supports many common snippets and associated actions for wrapping existing code in common block expressions. The only downfall of this plugin is the lack of support of ES6, but the publisher has mention that ES6 class support is still underway,

Formatting and Type Checking

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.

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

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

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.

Linters

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

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

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

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

Simple IntelliSense & Snippets for Alpine.js framework.

Debugging

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 Chrome

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

Debugger for Firefox

Debug your web application or browser extension in Firefox

Debugger for Microsoft Edge

A VS Code extension to debug your JavaScript code in the Microsoft Edge browser. This is also used to enable JavaScript debugging inside the Microsoft Edge browser when launched from ASP.Net Projects in Visual Studio.

Productivity Tools

NPM

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

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

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

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 allows you to send HTTP request and view the response in Visual Studio Code directly.

Git History

View git log, file history, compare branches or commits