Visual cues

There are a few extensions that, with small visual cues, makes coding just a little bit easier. The ones I use right now:

Bracket Pair Colorizer 2

This can help you understand what is enclosed by what. It simplifies debugging as well as makes you more aware of potential mis-types as they happen. The extension will color the opening and closing brackets that belong together in the same color:

Colorizer extension Bracket Pair Colorizer 2 in action

Update: Since Bracket Pair Colorizer was so popular, Microsoft has now included it in Visual Studio out of the box, you don’t need to install it as an extension.

Color Highlight

See what color you’re setting at a glance.

Color Highlight A subtle grey, on display

Highlight Matching Tag

Similar help as what Bracket Pair Colorizer gives, but I like how the corresponding opening/closing tag lights up for a few milliseconds when the mathcing tag is clicked.

Highlight Matching Tag Match made in heaven

TODO Higlight

If there is a part of the code you know you’ll need to re-visit later, this is great way to set a reminder.

TODO Higlight Note to self, by TODO highlight

You can find all of these in the Extensions Marketplace in VSCode.

More From The Dev Tricks Series

OpenAI - Integrate to Vue front-end

Series: Dev Tricks

Excel Exports - Vue + Firebase solution

Series: Dev Tricks

Equality of Sets

Series: Dev Tricks

Sets And Duplicates

Series: Dev Tricks

Essential Hotkeys

Series: Dev Tricks

Dynamic map with Mapbox and Google Sheets

Series: Dev Tricks

Staying motivated while learning to code

Series: Dev Tricks

JAMstack forms with Netlify

Series: Dev Tricks

Hosting a Jekyll blog on Netlify via GitHub

Series: Dev Tricks

Generating the blog with Jekyll

Series: Dev Tricks