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:

VS Code Colored Bracket Pair Guides Comparison ON OFF

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.

VS Code Bracket Pair Guides Set to True

[VS Code Bracket Pair Guides Set to True]

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

VS Code Bracket Pair Guides Set to Active

[VS Code Bracket Pair Guides Set to True]

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

VS Code Bracket Pair Horizontal Set to Active

[Bracket Pair Horizontal Set to Active]

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:

 

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.

 

You may also like...