Configuring VSCode Colorized Brackets

#vscode #productivity #tooling #functional

Overview

Most of us likely still remember that initial feeling of amazement after installing the the wildly popular but now deprecated Bracket Pair Colorizer extension by CoenraadS. After over 10M+ downloads, the options once delivered by that extension have now become native features in VS Code.

At first, I found it difficult to achieve the same level of comfort and functionality offered by Bracket Pair Colorizer. And judging from the nearly 100 issues opened on GitHub, I was not alone. That said, the VS Code team has changed my impression with their latest feature update this past October.

editor.guides.highlightActiveIndentation — Vertical lines now depend on the indentation of the code that is surrounded by the bracket pair. (Image: Microsoft)

Discover What's New

I will cover each of the aforementioned updates briefly before sharing the configuration I am now using in VS Code. So without further ado, let's check out these new features! 😎

Bracket Pairs

Indentation of bracket characters can now be customized based on the programming language being used.
Colorization of bracket characters can now be defined based on functionality which is inferred from the depth of nesting.

Bracket Pair Guides

Horizontal lines now outline the scope of a bracket pair.
Vertical lines now depend on how the code within the bracket pair is indented.
Bracket pair guides now have a third option, 'active', providing a more granular level of control over colorized highlights.
🎉 Guide highlights now support color customizations! 🎉

Custom Settings Example

Now that we have an idea of the possibilities, here is a working example, copied from my settings.json as promised. It has been freshly revised to take advantage of the new updates.

The relevant changes made to the settings.json file.

Sample Code w/ Colorized Brackets — Shows these settings applied to brackets in different languages.

Conclusion

You now have a good starting point for creating a customized bracket pair colorization that works well for you. Of course, I was not able to cover every setting and variable in this short article.

There are many options which you can enable or disable to optimize your VS Code experience. Remember you can always reference the default settings in case your settings.json file is or becomes a bit disorganized.

I'm excited to see the configurations and themes you all create using these new feature, so please leave a screenshot or code snippet in the comments.

Don't forget to 💖 this article and if you're feeling extra generous, please click my name below to 🎆subscribe🎇!

-- killshot13