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

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!

Comments

[Yog]

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",
}

[Nick Taylor]

Noice!

[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 😄

[Nick Taylor]

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!

Call to action for all VS Code users!

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

#forem #vscode #webdev

[Osama Abbas]

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,

[Maksym Mykhailenko]

bracketPairsHorizontal: false 

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

[Navin Kodag]

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

[Phong Duy Bui]

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

[Navin Kodag]

worked like a charm, thanks

{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true
}

[Thomas Bnt]

Really love this extension! I used that on VSCode and Jetbrains 👌🏼

[Lee]

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