DEV Community

loading...
Cover image for To the VSCode Extensions I Love the Most

To the VSCode Extensions I Love the Most

Ronnie
web developer & carly rae jepsen enthusiast
Updated on ・3 min read

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

Bracket Pair Colorizer

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:

Code without Bracket Pair Colorizer

Life WITH Bracket Pair Colorizer:

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

Bracket Line Match

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

Simple React Snippets - Functional Components  & Hooks

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

JavaScript Code Snippets

These are the ones I use most often, but there are a ton more. Notable mentions include:

  • sti for a setInterval setup
  • thenc to add .then() and .catch() to a promise.
  • clg for a console.log()

Template String Converter

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 a will give you opening and closing link tags.
  • Typing div will 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!

HTML Tag Wrapper
HTML Tag Wrapper

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.

CSS Snippets

Yes, yes, more snippets! What developer doesn't love writing less code?

CSS Snippets

The length of this list of snippets is rivaled only by a Game of Thrones book.

Live Sass Compiler

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:
Watch Sass

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.

Discussion (19)

Collapse
seancassiere profile image
Sean Cassiere

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

Collapse
bosphoramus profile image
Antonio Ramírez

I think that VS Code’s implementation doesnt draw a colorized line to the closing bracket sadly :(

Collapse
samelawrence profile image
Sam E. Lawrence

That's why I also use the rainbow indent plugin.

Collapse
whippingdot profile image
Sanjaay R.

I think it does, just very lightly...

Collapse
nishithsavla profile image
Nishith Savla

The HTML tag wrapper is also built into VS Code.

To use it follow these steps:

  • Go to command palette using F4 or Ctrl + Shift + P
  • Search for Emmet: Wrap tag with abbreviation
  • Select it and enter the tag you want. You can also use an Emmet expressions here.

For frequent use, you can set a keybinding to it as well

Collapse
talorlanczyk profile image
TalOrlanczyk

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

Collapse
__161b6588c39d0 profile image
Artyom Titov

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!

Collapse
steindelse profile image
SteindelSE

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 .

Collapse
daniel_petroski_4dd39491b profile image
Daniel petroski

What about Prettier? Lol. Auto wrapping? How lazy are you? Lmao

Collapse
arynnboniface profile image
Ronnie Author

I've got prettier, for sure and auto-wrapping has been turned on since the day I downloaded VSCode!

Collapse
daniel_petroski_4dd39491b profile image
Daniel petroski

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.

Collapse
johnmarison2 profile image
Johnmarison

Hello Ronnie,
Nice to read this blog

Collapse
stuffsuggested profile image
Collapse
amrishpandey profile image
amrishpandey

thats a very good list of extensions, much needed. thank you for this list.

Collapse
jpmurara profile image
JPMurara

👏🏻👏🏻👏🏻

Collapse
gumonet profile image
Angel Gutierrez

Amazing list! Thanks for sharing!

Collapse
ritabratadas343 profile image
Ritabrata Das

Nice research dude

Collapse
llldar profile image
Nathaniel

Checkout my meme extension: marketplace.visualstudio.com/items...

Collapse
candicelizabeth profile image
candicelizabeth

This is such a great list of extensions!! Thank you so much for making this!!!!!!