Great VSCode extensions for JS Developers

Hey everyone, welcome to my first post here on DEV Community!

In this post I will be talking about some great VSCode extensions for JavaScript Developers.

NOTE: This list does not include extensions meant only for a single framework/library.

So let's get started!!!

Snippet extensions

These extensions provide code snippets.

1. JavaScript (ES6) code snippets

This extension provides code snippets for the following languages:

• JavaScript (.js)
• JavaScript React (.jsx)
• TypeScript (.ts)
• TypeScript React (.tsx)
• HTML (.html)
• Vue (.vue)

Note: The snippets provided by this extensions contain semicolons (;).

Extensions on VSCode Marketplace

2. JavaScript (ES6) code snippets in StandardJS style

This extension provides the exact same snippets for the same languages as the extension mentioned above, the only difference being that the snippets do not contain semicolons (;).

Extension on VSCode Marketplace

Syntax Highlighting Extensions

These extensions highlight the code according to their syntax (does that make sense ^^').

1. Bracket Pair Colorizer 2

This extension highlights matching brackets with different colors, helping you identify which bracket belongs to which block.

Extension on VSCode Marketplace

2. DotENV

This extension provides syntax highlighting for .env files.

Extension on VSCode Marketplace

Linter Extensions

These extensions lint your code.

1. ESLint

This extension use the ESLint library to lint your code. It's also the most used linter.

Extension on VSCode Marketplace

2. JSHint

This linter uses the JSHint library to lint your code.

Extension on VSCode Marketplace

NPM Extensions

These extensions help with NPM (Node Package Manager).

1. npm

This extension uses package.json to validate installed packages. If anything is missing or versions are mismatched, the extension will provide you with clickable options to fix the issue.

Extension on VSCode Marketplace

2. npm IntelliSense

This extension provides auto-completing npm modules in import (var, let, const and import) statements.

Extension on VSCode Marketplace

Other Useful Extensions

These extensions don't fit under any heading in this list but they are quite useful.

1. Prettier

This extension is an opinionated code formatter which formats JS, TS, and CSS code.

Extension on VSCode Marketplace

2. Path IntelliSense

This extension provides path completion for importing files. Works in HTML and CSS files as well.

Extension on VSCode Marketplace

3. Live Server

This extension launches a local development server with live reloading for static as well as dynamic pages.

Extension on VSCode Marketplace

4. Thunder Client

This extension is basically a Postman built into VSCode via an extension.

Extension on VSCode Marketplace

Alright, that ends the list.

Thanks for sparing time to read this whole post. Appreciated.

Socials

Discord
GitHub
Instagram

Thanks!!!

Comments

[Raph Zenou]

Thanks for the article mate. Just wanted to share other extensions:

• Rainbow Indent, a great addition to the powerful Bracket Pair colorizer (now built in) / Prettier combo you suggested
• GitLens, a superb complement to the source control Tab
• JSON explorer well to do what it says on the tin
• Microsoft Visual Studio Live Share for pair programming directly in the editor !!

[Edit : added VSCode live share which always blows my mind when I use it but that I forgot]

[Insidious]

Thanks for mentioning! :-)

[Patrik]

Bracket Pair Colorizer 2 isn't necessary anymore as that functionality is now built into VSCode :) code.visualstudio.com/updates/v1_6...

[Insidious]

Oh, thanks for mentioning! I don't really read the changelogs so didn't know about it. :)

[Lars Grammel]

Great list, I use most of the extensions. I've developed another extension (for refactoring & linting): marketplace.visualstudio.com/items... - would be curious to hear what you think :)

[Insidious]

Thanks. Will use your extension and reply, since I was working on refactoring a project :)

[Insidious]

Alright, I refactored that random project. Your extension really made it much easier to refactor it. Thanks!

[Lars Grammel]

Thanks, glad it was useful!

[Robert G. Schaffrath]

As another reply notes, Bracket Pair Colorizer is now a built in feature of VSCode starting with version 1.60 and is faster (which was the motivation for it be added as an internal feature).

To enable it, you need to either go to "Text Editor" and then check the "Editor>Bracket Pair Colorization" box to enable it or edit your settings.json and set "editor.bracketPairColorization.enabled" to "true".

[Insidious]

Thanks for mentioning! :)

[Mehmet Yatkı]

Hey @insidiousthedev , thanks for the list.. you can also check this little extension of mine. It gives you CTRL + SHIFT + T shortcut to surround your codeblocks with snippets.

yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks

Surround

A simple yet powerful extension to add wrapper snippets around your code blocks

Features

• Supports language identifiers 🚀New!
• Supports multi selections
• Fully customizable
• Custom wrapper snippets
• You can assign shortcuts for each wrapper snippets separately
• Nicely formatted (Preserves indentations 🚀New!)
• Sorts recently used snippets on top 🚀New!

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 2: Wrapping multi selections

How To Use

After selecting the code block, you can

• right click on selected code
• OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favorite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands

Command	Snippet
surround.with (ctrl+shift+T)	List of all the enabled commands below
surround.with.if	if ($condition) { ... }
surround.with.ifElse	if ($condition) { ... } else { $else

…

View on GitHub

Cheers, 🚀🖖

[Insidious]

That is definitely a great extension you made! Keep up the great work and thanks for mentioning :)

[BadCat Design]

Thanks for the list.
Live Server (last updated April 2019) is an awesome extension! However for simple live refreshing HTML/CSS/JS (not for react, angular etc), we've been using Microsoft's "Live Preview" - still in "Preview" status - but has been super stable here.
marketplace.visualstudio.com/items...

[Insidious]

I'm so used to live server lmao. Thanks for mentioning!

[Muhammad wasi]

Tabnine
Thunder Client(Api testing)
Kite
BookMark
Vim

[Insidious]

I actually use Thunder Client instead of Postman, idk how I missed that. Thanks for mentioning! :)

[Muhammad wasi]

Its ok! ( :

[niksin]

13 VSCODE extensions that every developer should use

[Insidious]

Hmm that's a great list, but some extensions are already built into vscode now. Thanks for mentioning :)

[Yann MICHAUX]

One more extension, which is just awesome : i18n-ally
github.com/lokalise/i18n-ally

[Insidious]

Thanks for mentioning! :)

[Alp Gul]

Is there a extension to open jsfiddle, codepen, jsbin examples with vscode?

[Insidious]

Sorry, I don't know about it. :(

[Diogo Monteiro]

Great tip on NPM extensions! Ty :)

[Insidious]

You're welcome! :D

[Roxy]

Hi!

Great list, and I'll add one. I found that Live Server isn't as reliable as Five Server. marketplace.visualstudio.com/items...

[Insidious]

Thanks for mentioning! :)

[Đại Việt Composite]

Congratulations on your first post. Hope to get more great ideas from you.

[Insidious]

Thanks!

[Mihir Rane]

Congratulations on your first post! I didn't know about npm extensions, thanks for the help. :)

[Insidious]

Glad it helped!