This certainly isn't the first time someone's made a list of their favorite VSCode extensions and it won't be the last, but these are mine! I'll start with some of my favorite JS related extensions and then we'll jump into HTML/CSS helpers.
I'm starting with the holy grail of all extensions. This one, I swear, has saved my life.
JS & Friends
This extension does exactly what it's name says. It might not seem like anything life changing, but think about working with some deeply nested code, or a huge file.
Life WITHOUT Bracket Pair Colorizer:
Life WITH Bracket Pair Colorizer:
Each pair of brackets, curly brackets and parentheses has its own color, which makes it very easy to identify where you might have an 'oops'.
Wow, this already seems AWESOME, but WAIT-- there's more. Moving your cursor to the inside of the first bracket draws a line (in the same color) to its partner.
Simple React Snippets / Next.js Snippets
Writing boilerplate code takes FOREVER. It's ANNOYING. Simple React Snippets and Next.js Snippets ease that boilerplate pain.
Functional Components & Hooks with Simple React Snippets
Next.js Snippets
Both of these extensions have a ton of snippets, but I don't have the time to make that many gifs!
JavaScript (ES6) Code Snippets
This one is very similar to Simple React Snippets, but applies to plain 'ole, vanilla JavaScript.
These are the ones I use most often, but there are a ton more. Notable mentions include:
-
stifor asetIntervalsetup -
thencto add.then()and.catch()to a promise. -
clgfor aconsole.log()
This one is small but mighty (helpful). Anytime you type ${} within a set of single or double quotes, this extension automatically converts them to backticks.
HTML & CSS
VSCode is pretty great with HTML & CSS all on its own. * You can use html:5 to get some solid HTML boilerplate.
- Typing
awill give you opening and closing link tags. - Typing
divwill give you opening and closing link tags. - VSCode auto-completes CSS attributes for you.
- The newest VSCode update allows you to edit an opening and closing tag at the same time (😍).
There are a few good helpers out there though!
Wrapping already written code in a new tag has been driving me insane for as long as I can remember, but now there's an answer. Highlight, ctrl + i and the nightmare is over.
Yes, yes, more snippets! What developer doesn't love writing less code?
The length of this list of snippets is rivaled only by a Game of Thrones book.
Last but not least, Live Sass Compiler! Sure, sure, you can just get this up and running in your terminal with a command or two, OR you could just click this:
Totally up to you, but I know what I'd rather do.
That's it for my favorite extensions list (for now). Feel free to drop your favorites in the comments! I'm always looking for new gems in my extension treasure collection.
Top comments (19)
Great list you've compiled here.
Just FYI, VSCode now has Bracket Pair Colorization built-in to the editor by default.
The new native implementation is said to be more performant as well.
You'll need to disable the Bracket Pair Colorizer plugin and reload the editor. Then you can enable the VSCode implementation of it by adding this into the settings.json.
"editor.bracketPairColorization.enabled": true
James Q Quick video on this - youtu.be/KZC2_OMaEpc
I think that VS Code’s implementation doesnt draw a colorized line to the closing bracket sadly :(
That's why I also use the
rainbow indentplugin.I think it does, just very lightly...
The
HTML tag wrapperis also built into VS Code.To use it follow these steps:
Emmet: Wrap tag with abbreviationFor frequent use, you can set a keybinding to it as well
About the bracket per colorize I change to version 2 that is still get updated and go different new stuff
the creator itself suggests to move to the second one
The v1- stop been update in 2019
V2 - still is
Template string converter is a must-have for me now! Immediately going back from the bed in the middle of the night now just to install it and not forget about it. Thanks for sharing!
Great article!
You might consider changing your html wrapper to https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap&ssr=false#review-details
Not only is it more consistent cross platform, but it allows you to wrap more than just elements, such as if you want to wrap some text in
or .
What about Prettier? Lol. Auto wrapping? How lazy are you? Lmao
I've got prettier, for sure and auto-wrapping has been turned on since the day I downloaded VSCode!
I’m new to VS and JS. Doing a career switch in tech and that’s important to me. Although not a fan of JS syntax. I’m skipping to React lol. Or Swift.
Hello Ronnie,
Nice to read this blog
Check Out Mine List for Best VScode Theme
thats a very good list of extensions, much needed. thank you for this list.
👏🏻👏🏻👏🏻