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
Thanks!!!
Top comments (31)
Bracket Pair Colorizer 2 isn't necessary anymore as that functionality is now built into VSCode :) code.visualstudio.com/updates/v1_6...
Oh, thanks for mentioning! I don't really read the changelogs so didn't know about it. :)
Thanks for the article mate. Just wanted to share other extensions:
[Edit : added VSCode live share which always blows my mind when I use it but that I forgot]
Thanks for mentioning! :-)
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 :)
Thanks. Will use your extension and reply, since I was working on refactoring a project :)
Alright, I refactored that random project. Your extension really made it much easier to refactor it. Thanks!
Thanks, glad it was useful!
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
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
to get list of commands and pick one of them.
List of commands
surround.with
(ctrl+shift+T)surround.with.if
surround.with.ifElse
Cheers, 🚀🖖
That is definitely a great extension you made! Keep up the great work and thanks for mentioning :)
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".
Thanks for mentioning! :)
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...
I'm so used to live server lmao. Thanks for mentioning!
13 VSCODE extensions that every developer should use
Hmm that's a great list, but some extensions are already built into vscode now. Thanks for mentioning :)
One more extension, which is just awesome : i18n-ally
github.com/lokalise/i18n-ally
Thanks for mentioning! :)
Tabnine
Thunder Client(Api testing)
Kite
BookMark
Vim
I actually use Thunder Client instead of Postman, idk how I missed that. Thanks for mentioning! :)
Its ok! ( :
Hi!
Great list, and I'll add one. I found that Live Server isn't as reliable as Five Server. marketplace.visualstudio.com/items...
Thanks for mentioning! :)