VSCodeTips

VSCodeTips is a community of amazing vscoders

We're a community that shares tips & tricks on how to best leverage VS Code

Create account Log in
Nick Taylor
Nick Taylor

Posted on • Updated on

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

Happy VS Coding!

Discussion (5)

Collapse
cerchie profile image
Lucia Cerchie

this looks amazing! What do you need to do to activate it? Do something in VSCode settings, or restart VSCode?

Collapse
nickytonline profile image
Nick Taylor Author • Edited on

Update 2021/09/08: It made sense to make this comment part of the original post.

  1. Make sure to remove the bracket 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.

Collapse
cerchie profile image
Lucia Cerchie

sweet thank you!

Collapse
leodevbro profile image
Levan Katsadze • Edited on

Also maybe you will like VSCode extension "Blockman", it highlights nested code blocks. (I am the author of Blockman).
community.vscodetips.com/uploads/a...

Collapse
robbie_baehr profile image
Robbie Baehr

this looks great thanks!