DEV Community

Cover image for Every VS Code extension a JavaScript web developer should have in 2021 (with gifs!)

Every VS Code extension a JavaScript web developer should have in 2021 (with gifs!)

Zak Laughton on February 09, 2020

Visual Studio Code is a powerful editor out of the box, but there are many many VS Code extensions to make it even more powerful! If you're new to...
Collapse
 
cadams profile image
Chad Adams • • Edited

If you like Fira Code checkout JetBrains Mono personally I like JetBrains Mono more.

Collapse
 
mittalyashu profile image
Yashu Mittal •

That's a good looking Mono font.

I suggest you should also try the Cascadia font, it is free and open source.

Prior to this, if there was any other font I want to use that was Operator Mono since it was really expensive I couldn't buy it.

and when I came across Cascadia font, I was like

Collapse
 
zaklaughton profile image
Zak Laughton •

Ooh, that does look nice. I like the comparisons they have on the site too. Might have to try this out. Thanks for sharing!

 
zaklaughton profile image
Zak Laughton •

Nice! Looks like this is was disabled in my editor for some reason. Probably was disabled when I installed the other extensions. Works great in .html files! Hopefully the VS Code team can do the same for React JSX soon too 🤞.

Collapse
 
zaklaughton profile image
Zak Laughton •

Yikes, thanks for the heads up! I have been noticing issues related to this lately, but didn't realize it was being caused by the extension itself. I've uninstalled it and updated the post.

I haven't seen VS Code natively auto-update corresponding tags in HTML files or JSX in React.js files, unfortunately. Would love to see this functionality without the performance issues.

Collapse
 
paul7337 profile image
paul7337 •

Great article, thanks! Rainbow CSV is occasionally quite useful to have around.

Collapse
 
frankmuts profile image
frankmuts •

Just a small thing:
The link to "javascript console utils" is wrong, it brings you to "indent-rainbow"

Collapse
 
zaklaughton profile image
Zak Laughton •

Oops...fixed it. Thank you!

Collapse
 
anandshenoy14 profile image
Anand Shenoy •

I dont know how Search Node Modules did not make your list. Just a terrific way to jump and debug node modules.

Collapse
 
fat_tonyy profile image
Fat-Tony •

html.mirrorcursoronmatchingtag was buggy as well, use this instead which came with version 1.44
"editor.renameOnType": true,

Collapse
 
faahdnoor profile image
Fahad Noor •

Debugger For Chrome, Local History, and Tech Debt Tracker are also handy.

Collapse
 
elanandkumar profile image
Anand Kumar •

Fira code and Jetbrains Mono is good but would suggest to try this out;

recursive.design

After using this, I stopped thinking about Dank Mono and Operator mono. :)