DEV Community

Nick Taylor (he/him)
Nick Taylor (he/him)

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

Native Bracket Pair Colourization in VS Code

Cross-posted from community.VSCodeTips.com

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

Happy VS Coding!

Discussion (6)

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
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
leewynne profile image
Lee

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

Collapse
thomasbnt profile image
Thomas Bnt

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