25 Best VSCode Extensions For JavaScript Developers

We all have our favorites, but you gotta know the essentials, let’s load up our guns.
“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” — Abraham Lincoln
Time has always been and always will be a luxury especially for us developers, have you ever wondered why most of the developers are described as someone who mostly spend time on his/her own, someone who is always on his/her computer, never goes out, who eats on his/her workstation, non-technical people’s description in its broader picture and us developers looking on a much closer lens we can imagine how many codes it needs to write over and over, rewriting repetitive lines of codes other copy-pasting, can you even imagine the memorization we needed, the tracking of memory trying to get that different set of codes, syntax and different snippets from third-party tools, even the littlest details of having a proper indention and white-spaces finally here’s the solution.
VSCode Extensions are the tools we needed not just to make our lives less stressful, but also it can help us be more productive, more efficient, it even helps us to become better developers by learning several practices that have already been used by early generations of developers.
Other than snippets, hot-reload, autocomplete, there are just so many extensions available across several programming languages, and JavaScript’s popular frameworks such as Redux, Angular, React, Vue, TypeScript and many more. JavaScript Extensions are created to help us speed up our development work so we can focus more of our brain juice into the complex side of things like solving problems, creating the logic, designing data structures and so on, we simply are just eliminating the boring side of programming or at least for some.
Snippets
Snippets in its simplest definition are about reusing codes and saving time.
JavaScript ES6 Code Snippets
This extension includes snippets for JavaScript ES6 syntax, this code snippet is perfect for JavaScript and TypeScript.

Download it here:
JavaScript (ES6) code snippets
Edit description
marketplace.visualstudio.com
Angular Snippets

Download it here:
Angular Snippets (Version 9)
This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML. See the CHANGELOG for the…
marketplace.visualstudio.com
ES7 React/Redux/GraphQL/React-Native Snippets

Download it here:
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 You can…
marketplace.visualstudio.com
jQuery Code Snippets

Download it here:
jQuery Code Snippets
Edit description
marketplace.visualstudio.com
Linters
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.

Download it here:
ESLint — Visual Studio Marketplace
Extension for Visual Studio Code — Integrates ESLint JavaScript into VS Code.
marketplace.visualstudio.com
JSHint

Download it here:
jshint
Integrates JSHint into VS Code. The extension looks for a jshint module in the current directory and in the global…
marketplace.visualstudio.com
IntelliSense
IntelliSense can show the developers intelligent code completion, you can also see information on a certain function, variables, properties by hover, where it helps you code more quickly and efficiently.
npm Intellisense

Download it here:
npm Intellisense — Visual Studio Marketplace
Visual Studio Code plugin that autocompletes npm modules in import statements. In the command palette (cmd-shift-p)…
marketplace.visualstudio.com
Path Intellisense
Path Intellisense is one of the must-have VSCode extension, especially for those who are working on a large project, its main function is to auto-complete the path of the file you are trying to import, it will automatically show up as you type in.

Download it here:
Path Intellisense
Edit description
marketplace.visualstudio.com
Type checking and formatting
Prettier
Prettier is responsible to format codes, it makes sure your code is clear, clean, and readable without you stressing things out especially long and complex code files. Years ago developers spent so much time making sure that the codes are properly indented, white spaces, to make sure that other developers will not have a hard time understanding things, and prettier did a good job saving us all.

Download it here:
Prettier — Code formatter
Edit description
marketplace.visualstudio.com
Bracket Pair Colorizer 2

Download it here:
Bracket Pair Colorizer 2
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and…
marketplace.visualstudio.com
Babel JavaScript

Download it here:
Babel JavaScript
Edit description
marketplace.visualstudio.com
npm

When working with JavaScript in vs code, we are all aware that using node has always been part on every project we create, and so we need a little help in making sure that the packages are installed properly, npm extension helps out whenever there are issues with the package missing mismatched versions, the npm extension will notify you via a clickable option to fix the certain issue.
Download it here:
npm — Visual Studio Marketplace
This extension supports running npm scripts defined in the package.json file and validating the installed modules…
marketplace.visualstudio.com
React Native Tools

Download it here:
React Native Tools
This VS Code extension provides a development environment for React Native projects. Using this extension, you can…
marketplace.visualstudio.com
Vetur

Download it here:
Vetur
Get it now.
marketplace.visualstudio.com
Paste as JSON
This extension helps you to quickly convert your JSON data into JavaScript codes, without the stress of properly formatting and white spaces, it has a very simple task but makes everything light and fast.

Download it here:
Paste JSON as Code
Interactively generate types and (de-)serialization code from JSON, JSON Schema, and TypeScript Paste JSON/JSON…
marketplace.visualstudio.com
Quokka.js

This is a prototyping playground, the results automatically appear inside your IDE, it will show or print the result on every line once you complete the typing of your codes.

Download it here:
Quokka.js
Get it now.
marketplace.visualstudio.com
GraphQL for VSCode

Download it here:
GraphQL for VSCode
Edit description
marketplace.visualstudio.com
Debugging
Debugger for Chrome

Download it here:
Debugger for Chrome
Edit description
marketplace.visualstudio.com
Live Server
This tool will be responsible to help automatically reload the web page whenever there are changes in your code on the IDE, without you reloading your web page over and over, it saves a lot of time, to use this you can just click the Open with Live Server, and as you can see it has been download 5M times.

Download it here:
Live Server
I’m sorry but I’m super busy now. If you want to be a maintainer of the project, please feel free to contact me! You’ve…
marketplace.visualstudio.com
Productivity tools for JavaScript Developers
Color Highlight

Download it here:
Color Highlight
This extension styles css/web colors found in your document. In VSC press Ctrl+Shift+P (Cmd+Shift+P on Mac) then type…
marketplace.visualstudio.com
Todo Tree

Download it here:
Todo Tree
This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them…
marketplace.visualstudio.com
Settings Sync

Download it here:
Settings Sync
While being free and open source, if you find it useful, please consider supporting it by donating via PayPal or Open…
marketplace.visualstudio.com
REST Client

Download it here:
REST Client
Edit description
marketplace.visualstudio.com
Indent Rainbow

Download it here:
indent-rainbow
This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may…
marketplace.visualstudio.com
VSCode-Spotify

Download it here:
vscode-spotify
Use Spotify inside vscode. Provides integration with Spotify Desktop client. Note that some of functionality only…
marketplace.visualstudio.com
Thank you for reading! Follow me for more Self-taught developer articles.