VS Code Colored Bracket Pair Guides

If you’re working with a lot of nested code, sometimes it’s hard to identify matching brackets, braces, or parentheses.

The good news is that VS Code now allows you to color the bracket pair guides which are those vertical lines that outline the blocks of your code.

They can help you better understand the structure of your syntax.

Here you can see the difference:

In this post, we’re gonna be looking at how to enable this feature and also how you can customize the color of bracket pair guides.

Let’s get started!

 

Enable Bracket Pair Guides

By default VS Code does show the matching bracket pairs, but it doesn’t highlight them with a specific color.

Let’s change that.

Open the Settings window by pressing down CTRL + , (comma) or go to File -> Preferences -> Settings and search for “bracket pairs“.

If we set the “Bracket Pairs” to true, it is going to color all of the guides based on the bracket pairs in the file.

We can also set it to active which would instead only show the currently active guide.

Additionally, we can also enable “Bracket Pairs Horizontal” setting which will render horizontal guides.

Customize the Colors

Next, let’s see how we can customize the colors of the guides.

Press down CTRL + SHIFT + P and open the settings.json file.

The editorBracketPairGuide.background{1,...,6} and editorBracketPairGuide.activeBackground{1,...,6} can be used to customize the colors and must be placed inside the workbench.colorCustomizations object.

Here are the full settings:

---

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.      

Comments