VS Code has enabled the Bracket pair Colorization feature by default. This has caused many people to seek out a way to disable the feature, however there is a bit more to the story than simply using:
"editor.bracketPairColorization.enabled": false,
that is because there are 2 different block guide features that have been built-into the bracketPairColorization feature, as well as an indent-guide feature that highlights much the same way.
To disable all the bracket pair colorization & guides, you need to do the following.
{
// Bracket-pair colorization
"editor.bracketPairColorization.enabled": false,
// Bracket-pair guides
"editor.guides.bracketPairsHorizontal": false,
"editor.guides.highlightActiveBracketPair": false,
// Indentation guides
"editor.guides.indentation": false,
"editor.guides.highlightActiveIndentation": false
}
TO LEARN HOW TO DISABLE ONLY PARTS OF THE FEATURE, OR MORE IN GENERAL ABOUT THIS FEATURE, REFER TO THE FOLLOWING SECTIONS
Intro
Disabling/Configuring Bracket Pair Colorization & Guides
V.S. Code's 'Bracket-pairs Colorization' feature frustrates many developers. Recently it was activated by default, and people were upset about it. The problem wasn't the actual feature itself, but the fact that the feature has an enable/disable setting that doesn't seem to turn the feature off when it is set to disable the feature. If you have tried to turn this feature off, and wound up unable to, do think get mad, or upset at yourself (which is what I do in similar situations), most have went through the same hardship, furthermore; this feature doesn't limit its "frustrating of users" to only those who desire to disable it altogether, the truth is, the feature is highly customizable, it actually includes about 3 different features wrapped into one, and is hard to make sense off for anyone attempting to configure it for the first time.
The best way to do this is going to be to demonstrate the configuration that you use to completely disable the feature. Then, after that I will walk you through each setting, and explain what it is they do, and the theme properties they are attached too.
Part-2
Disabling Bracket-pair Colorization & Bracket-pair Guides
Below is a "tried -&- true" method for the complete disablement of the bracketPairColorization
, bracketPairColorization.guides
& guides.indentation
editor-features (or perhaps it would be better to type "editor.*
features").
{
// Bracket-pair Highlighting
"editor.bracketPairColorization.enabled": false,
// Bracket-pair guides
"editor.guides.bracketPairsHorizontal": false,
"editor.guides.highlightActiveBracketPair": false,
// Indentation guides
"editor.guides.indentation": false,
"editor.guides.highlightActiveIndentation": false
}
Part-3
Disabling Parts of Bracket-pair Colorization
If there are parts of the feature that really chap your hide, but other parts that you like, you can specify the certain rendering, coloring, and "onActive"-highlighting of Bracket-pairs, and the indent guides (horizontal &/or vertical), using the configurations shown below.
(3a) Taking Advantage of the Colorized Bracket-pairs Setting
In truth, I feel the complexity of the configuration required for this feature is 100% justified by what you can do with it. Though I don't agree with it being activated by default.
Below is a demonstration of what can be done with Bracket-pair Colorization that makes it so awesome. As you can see, the setting "editor.language.colorizedBracketPairs": [ ... ]
is being configured in the snippet below. The array pairs bellow are the bracket-pairs that the feature will highlight. In other words, this is how to define which bracket-pairs are highlighted. One way to disable the coloring of bracket pairs, is by simply not assigning any pairs to the colorizedBracketPairs
setting. You can define everything from a functions braces, to markdown astriks ["***", "***"]
, to C Pre-processor directives. The world is your ostyer when it comes to this setting.
"editor.language.colorizedBracketPairs": [
["{", "}"], // Block-Scoped Braces/Function-Braces
["[", "]"], // Array Square-brackets
["(", ")"], // Func Call-args/Declaration-params Brackets
["<", ">"], // HTML/XML Tags
["\"", "\""], // String Quotations
["_", "_"], // Markdown: Italicized
["**", "**"], // Markdown: Bold
["**_", "_**"], // Markdown: Italicized & Bold
["{{", "}}"], // Double Curly Brackets
["`", "`"], // Back-tics
["#ifndef", "#endif"], // Highlight C Directives as pairs
["<%", "%>"], // Wrapping variables in JSON
["${", "}"], // Wrapping template variables in JS/TS
["$(", ")"] // Wrapping of template variables in BASH
]
(3b) Customizing Indentation Guides
You can also customize "Bracket-pair Colorization Guides" & "Indent Guides" by asigning values other than true/false where applicable.
For example:
FOR EXAMPLE: The two settings below, can be configured using a third, boolean-alternate value:
The configuration below, configures the "bracket pair guides" to highlight only the active guides for the active block and no other guides.
"editor.guides.bracketPairs": "active",
"editor.guides.bracketPairsHorizontal": "active",
Now, if you how the setting below configured to true, it won't do anything, if bracketPairs are also active at the same time.
"editor.guides.highlightActiveIndentation": false,
the editor.guides.highlightActiveIndentation
setting in the snippet above, is part of a pair of settings used to customize a feature that was part of VS Code long before bracketPairs were around.
NOTE: If you have the settings below set to true
, and if you have "editor.guides.bracketPairs"
set to true
as well, and over-highlighted editor is the end result. You will see indent guides highlighting at different levels, as the bracket pairs work differently than the indent guides. The bracket-pair guides try to highlight use language-defined blocks, while the indent guides use the value assigned to "tab.width": number?
to determine where it will highlight. This causes indentation to be highlighted twice in many situations.
"editor.guides.indentation": true,
"editor.guides.highlightActiveIndentation": true,
For some reason they made a setting that helps you configure the two at once, I don't suggest it, but it's the value "always" assigned to "highlightActiveIndentation"
. If you did want to turn them on with bracket pairs, below shows how you would do it.
"editor.guides.bracketPairs": "active",
"editor.guides.bracketPairsHorizontal": "active",
"editor.guides.indentation": true,
"editor.guides.highlightActiveIndentation": "always",
Another option you have is you can set the "Bracket-pair guides" to true, then configure them to highlight the active block, like this:
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,
Part-4
Associated Theme Colors
So if we look at the last snippet, just above (I'll post it again below)...
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,
...you can see that all bracket pairs are turned on (so they are colored), but the active ones are highlighted. The way that this works is that in a theme, or in your settings.json
file, using the "workbench.colorCustomizations": {},
setting, the standard coloring of the bracket-pairs are colored a different color at 6 different block (or scope) levels. The color properties to which those colors are assigned are shown below:
"editorBracketPairGuide.background1": "#CC1177",
"editorBracketPairGuide.background2": "#5544DD",
"editorBracketPairGuide.background3": "#CC6622",
"editorBracketPairGuide.background4": "#779428",
"editorBracketPairGuide.background5": "#009944",
"editorBracketPairGuide.background6": "#1155DD",
Now, if you have highlightActiveBracketPair
set to true
, then the block you focus on is brighter, or a different color (it depends on how the properties below are configured), the active bracketPairGuide is colored using these theme-properties:
"editorBracketPairGuide.activeBackground1": "#EE2288",
"editorBracketPairGuide.activeBackground2": "#8844FF",
"editorBracketPairGuide.activeBackground3": "#FF5C0C",
"editorBracketPairGuide.activeBackground4": "#99CC33",
"editorBracketPairGuide.activeBackground5": "#00CC88",
"editorBracketPairGuide.activeBackground6": "#0077FF",
And the actual bracket-pairs (or the actual brackets themselves) are colored using these properties:
"editorBracketHighlight.foreground1": "#CC1177",
"editorBracketHighlight.foreground2": "#5544DD",
"editorBracketHighlight.foreground3": "#CC6622",
"editorBracketHighlight.foreground4": "#779428",
"editorBracketHighlight.foreground5": "#009944",
"editorBracketHighlight.foreground6": "#1155DD",
"editorBracketHighlight.unexpectedBracket.foreground": "#DD100C",
For more information visit:
-&/or-
Workbench: Color Customizations
and modify the colors on a theme basis"editor.bracketPairColorization.enabled": false