DEV Community

Native Bracket Pair Colourization in VS Code

Nick Taylor on September 04, 2021

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! // Detect dark theme ...
Read full post
Collapse
 
yogensia profile image
Yog • • Edited

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 •

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 • • Edited

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!

The DEV Team

Call to action for all VS Code users!

Ben Halpern for The DEV Team ・ May 12 ・ 1 min read

#forem #vscode #webdev
Collapse
 
tes3awy profile image
Osama Abbas • • Edited

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

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 🙈🙈