DEV Community

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

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

Lars Grammel on December 03, 2021

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?

Collapse
 
zalithka profile image
Andre Greeff • • 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)...
Collapse
 
swepool profile image
Swepool •

Dang, good ones!

Collapse
 
lgrammel profile image
Lars Grammel •

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.

Collapse
 
zalithka profile image
Andre Greeff •

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

Collapse
 
psysolix profile image
Stefano P •

Great list! Thanks 🤗

Collapse
 
willkuerlich profile image
Willkuerlich • • 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 ;)

Collapse
 
insidiousthedev profile image
Insidious •

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!

Collapse
 
lgrammel profile image
Lars Grammel •

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.

Collapse
 
insidiousthedev profile image
Insidious •

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.

Collapse
 
zalithka profile image
Andre Greeff • • 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!"
Enter fullscreen mode Exit fullscreen mode

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!"
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
mrdulin profile image
official_dulin • • 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.

Collapse
 
lgrammel profile image
Lars Grammel • • 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?

Collapse
 
mrdulin profile image
official_dulin • • 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

Thread Thread
 
lgrammel profile image
Lars Grammel •

Awesome, thanks!

Collapse
 
wefeh80042 profile image
wefeh •

Prettier - Code formatter
Tabulate

Collapse
 
ah3 profile image
Abhishek Hari •

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

Collapse
 
zalithka profile image
Andre Greeff •

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

Collapse
 
prabhakarnikhil14 profile image
prabhakarnikhil14 •

React extension pack

It has everything that anyone need for js and react