Lars Grammel for P42

Posted on Dec 3, 2021

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

#discuss #vscode #javascript #typescript

Plenty VS Code extensions are available on the marketplace.

I'm curious which ones (other than themes and icons) you use most when working with JavaScript and TypeScript? What do you like about them?

Top comments (18)

Andre Greeff • Dec 3 '21 • Edited

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)...

Swepool • Dec 4 '21

Dang, good ones!

Lars Grammel • Dec 3 '21

Awesome extensions, thanks for the recommendations!

Do you know by any chance if jsflowchart works with TypeScript? I could only get it to work with JS so far.

Andre Greeff • Dec 3 '21

no, sorry.. I think it's JS only. would be pretty cool to extend it with TS support too, but if we start exploring that rabbit hole, we would find a great many other languages to add support for... :D

Stefano P • Dec 7 '21

Great list! Thanks 🤗

Willkuerlich • Dec 12 '22 • Edited

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 ;)

Insidious • Dec 3 '21

The extensions I use while working with JS and TS:

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!

Lars Grammel • Dec 3 '21

Thanks for the kind words! I'm super glad P42 is useful, trying to make it better step by step. Let me know if there is a refactoring that you think could be useful, or if you hit a bug.

Woa Thunder Client looks great - installed.

Insidious • Dec 4 '21

I used Postman before, but it needed to be used outside of VSCode, which was kinda annoying. About 2 months later (August), I found Thunder Client so I was like why not use it. And now I'd say it's better than Postman in my opinion.

Andre Greeff • Dec 6 '21 • Edited

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

official_dulin • Jan 10 '22 • Edited

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.

Lars Grammel • Jan 10 '22 • Edited

I'm curious about this - I've been using it for a long time. However, when I tried to take a screenshot of what it does, I could not find a single example for JavaScript where it produced a recommendation for me that was not there out-of-the-box. Does it produce recommendations for you?

official_dulin • Jan 17 '22 • Edited

Disabled the extension: dev-to-uploads.s3.amazonaws.com/up...

Enabled the extension: dev-to-uploads.s3.amazonaws.com/up...

VS code

Version: 1.63.2
Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3
Date: 2021-12-15T09:37:28.172Z (1 mo ago)
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 19.6.0

Lars Grammel • Jan 17 '22

Awesome, thanks!

wefeh • Dec 30 '21

Prettier - Code formatter
Tabulate

Abhishek Hari • Dec 5 '21

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

Andre Greeff • Dec 6 '21

..maybe I didn't use it for long enough, considering "AI" needs time to learn things, but this one didn't do anything to help me. :/ I found myself spending more time cleaning up the code that it inserted for me, compared to just entering the same thing myself (random no-snippets guy over here).

maybe I should push through and use it for a little longer though, I keep hearing and reading people raving about it.