What are your favorite VS Code extensions for working with JS & TS?

yeah ok, I'll bite.. (:

first, a little disclaimer: many of these are not directly related to JS or TS, but I would say they are indirectly related to all languages.

so, to cherry-pick a few items from my current extensions list:

• Better Comments: pretty much just colour-coded comments, but having // ! <message> show up in red, and // ? in blue, // * in green, etc. is super helpful.
• CSS Stacking Contexts: because you can't have /[TJ]S/ without CSS (right??), and because nobody ever knows enough about CSS to catch every edge case themselves...
• Dependency Analytics: because, well, the JS package ecosystem.. need I say more? it btw, also supports scanning deps in Python, Maven, and Go.
• ESLint: which is almost a staple extension these days.. actually, isn't it pre-installed in VSCode? I haven't had a "fresh install" in forever. also supports TS these days (r.i.p. TSLint).
• Gremlins Tracker: another language-agnostic one, but oh-so-useful.. especially when copy-pasting code from someone who uses a Mac (JS interpreters really dislike the styled "left" and "right" double quotation marks).
• jsflowchart: makes it really easy to visualise the logic flow of a JS snippet.
• Json Editor: because, well, if you use JS, you use JSON. this helps, especially with larger objects..
• Package Json Upgrade: useful for any projects that use Node modules, provides an easy upgrade path, by "patch", "minor", or "major" version segment (which I've always wished the built-in one would do).
• Prettier - Code Formatter: this probably needs no introduction.
• Formatting Toggle: (tacked on because of Prettier) this one is absolutely crucial if you collaborate with people who dislike code formatters (yes, these people exist)...

Twoslash adds neat type hinting directly in your editor window.
Similar to the Wallaby extension.

Usage can be observed here

Oh and almost forgot, use Matt Pocock's YT channel as an extension for your typescript brain ;)

The extensions I use while working with JS and TS:

1. ES7 React/Redux/GraphQL/React-Native snippets
2. ESLint
3. JavaScript (ES6) code snippets
4. JavaScript and TypeScript Nightly
5. npm
6. npm Intellisense
7. Thunder Client
8. P42 JavaScript Assistant: Refactoring Hints & Automation

These extensions are the ones I ALWAYS have turned on.

And since this post is by P42, I just wanna say - P42 has been a BIG help recently, as I decided to refactor many projects, and now that I think about it, it's something I really need nowadays lol. It's just too good, keep updating it, and I'm sure it'll have a million installs soon!

I was going to append this one to my previous comment, but it does have some gotchas. read on below before you jump on this one...

• Toggle Quotes: tl;dr: no more manually changing quote style for whatever string you're working with.. all quite types (i.e.: ', ", and `) are now a simple keyboard shortcut away.

be very careful if your strings contain any contractions (like I'm, you're, everybody's, etc..).. it can do some funky things, depending on how you escape your strings.

the examples below were done in the Typescript language, just to ensure access to single quotes, double quotes, and backticks.

starting with "Ooh look! we've got a contraction!", and your cursor at the end of the string, after the !, you'll get the following:

1. first toggle: 'Ooh look! we've got a contraction!'
2. second toggle: 'Ooh look! we`ve got a contraction!`
3. third toggle: 'Ooh look! we"ve got a contraction!"

on the flip side, if you're a ridiculously well disciplined dev who always escapes potentially dangerous characters, even when you don't need to (there's probably an extension for this too edit, see further below), you'll start with "Ooh look! we\'ve got a contraction!".

and then you get the following:

1. first toggle: 'Ooh look! we\'ve got a contraction!'
2. second toggle: `Ooh look! we\'ve got a contraction!`
3. third toggle: "Ooh look! we\'ve got a contraction!"

FWIW, there are currently two open GitHub issues related to this behaviour (see #3 and #4), which means this may change at some point. I'm still going to give this one a good solid run though, because, well, strings and all that....

edit: I found Escape Quotes, which does help mitigate things a little.. though it's not as "mature" as other extensions.

biggest downfalls, there's no "toggle escape quotes" command, only "escape" and "unescape", both with no default shortcuts. I've assigned the following shortcuts myself:

• ctrl+shift+/ for "escape"
• ctrl+shift+alt+/ for "unescape"

combined with the built-in alt+shift+→ to "expand selection", escaping/unescaping/toggling your quotes becomes a keyboard-only affair. in my humble opinion, this is a big win.. :D

Visual Studio IntelliCode - The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

Prettier - Code formatter
Tabulate

Tabnine! I use it with every language, like its really useful! The AI is amazing!

React extension pack

It has everything that anyone need for js and react