Update: As of April 2022 (v1.67) bracket pair colorization is enabled by default.
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:
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!
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.