VS Code Native Bracket Pair Colorization

By default, VS Code comes with plain light-colored brackets which can be confusing when you have plenty of parentheses, brackets, and braces in your code.

The good news is that VS Code now supports native bracket pair colorization.

Here you can see the difference:

vscode native bracket pair colorization comparison

Want to watch a video to supplement your reading? Check this out:

 

Enable Bracket Colors

You can enable this setting by going to

File -> Preferences -> Settings

Search for “bracket colorization” and enable the Bracket Pair Colorization option.

And now you can more easily identify matching parentheses, brackets, and braces.

If you want to have more control over your settings, press down CTRL + SHIFT + P and open the settings.json file.

And add the following:

"editor.bracketPairColorization.enabled": true

Save the file and that’s it!

Customize the Colors

Another cool thing is that all colors are themeable and you can configure up to six colors.

If we mouse over the bracket pair colorization setting we can see that the tooltip suggests using the workbench.colorCustomizations setting to override the bracket highlight colors.

But it fails to specify what to put into the color customization setting.

So I did some research and I’ve found out some settings that work:

Bear in mind that the colors I’m using in this example are just random colors and may not be that pleasant to your eyes.

They are not really a color palette.

That’s it!

Happy coding!

 

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.

Spread the love
  •  
  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
  •  
    1
    Share
  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  

You may also like...