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.