DEV Community

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

Collapse
zalithka profile image
Andre Greeff • Edited on

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