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.
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.
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
Top comments (4)
Muchas gracias amigo, me fue realmente util!.
De nada, un placer.
Qual é o nome do Tema que vc usa ?
No seguro. Un par de años ya. Pero creo que uno de estos.
Material Palenight o Tokyo Night