DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Nick Taylor for VS Code Tips

Posted on • Updated on • Originally published at community.vscodetips.com

Native Bracket Pair Colourization in VS Code

I’m a big fan of the Bracket Pair Colorizer extension, but it looks like this is native in VS Code now and much faster!

Configure native bracket pair colourization

  1. Make sure to remove the Bracket Pair Colorizer extension.
  2. Update VS Code
  3. Open your user settings via CMD (CTRL for non-Mac users) + Shift + P and type settings. The settings JSON file will open. Add the following:
"editor.bracketPairColorization.enabled": true
Enter fullscreen mode Exit fullscreen mode

All colors are themeable and up to six colors can be configured.

James Q. Quick has a video about getting this all set up

More tips at https://vscodetips.com!

Happy VS Coding!

Top comments (11)

Collapse
yogensia profile image
Yog • Edited on

If you want to customize colors, you can do it by overriding your theme ones. Go to code.visualstudio.com/api/referenc... and do a search for Bracket pair colorization for all available settings.

For example, these are my custom bracket colors for the theme One Monokai:

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#5bb3b3",
    "editorBracketHighlight.foreground2": "#fac863",
    "editorBracketHighlight.foreground3": "#f99157",
    "editorBracketHighlight.foreground4": "#ec5f67",
    "editorBracketHighlight.foreground5": "#bb80b3",
    "editorBracketHighlight.foreground6": "#98C379",
}
Enter fullscreen mode Exit fullscreen mode
Collapse
nickytonline profile image
Nick Taylor Author

Noice!

Noice!

Collapse
felipeatsix profile image
Felipe Matheus de Souza Santos

It is actually ironic I found here a solution for how to remove it! hahaha I don't like it, all of the sudden I open vscode and I see all those colored brackets and completely hate how it looks. I missed the update changelog that mentions this was native so I started disabling all my extensions and nothing helped, then I researched and found this article which it is actually praising it, but still I could just set it to false πŸ˜„

Collapse
nickytonline profile image
Nick Taylor Author • Edited on

Glad it helped you turn it off. πŸ˜… Everyone likes to customize their editors to their liking, so all good! If you're a VS Code fan, consider checking out vscodetips.com!

Collapse
tes3awy profile image
Osama Abbas • Edited on

For those who need to get full customization of brackets without using extensions, you can add these lines to your VSCode settings (v1.60.0+):

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,
Enter fullscreen mode Exit fullscreen mode
Collapse
max_mykhailenko profile image
Maksym Mykhailenko
bracketPairsHorizontal: false 
Enter fullscreen mode Exit fullscreen mode

Saves my eyes. Thank you. Where I can find full list of preferences? Maybe something useful exist there

Collapse
100lvlmaster profile image
Navin Kodag

I like this. But I'd also like those lines that connect enclosing brackets.

Collapse
phongduybui profile image
Phong Duy Bui • Edited on

Yes, you can by add this line to setting.json file. it's built in
"editor.guides.bracketPairs": true

Collapse
100lvlmaster profile image
Navin Kodag

worked like a charm, thanks

{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true
}
Enter fullscreen mode Exit fullscreen mode
Collapse
thomasbnt profile image
Thomas Bnt

Really love this extension! I used that on VSCode and Jetbrains πŸ‘ŒπŸΌ

Collapse
leewynne profile image
Lee

This is great. I don’t know why I am so fussy and snobby about my vscode and iterm setup πŸ™ˆπŸ™ˆ

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.