I find this distracting:
I found the "editor.guides.highlightActiveBracketPair" setting and disabled it the settings (Ctrl+,), but nothing changed. I restarted the editor, but nothing changed. I checked ~/.config/Code/User/settings.json, and saw that it was there:
"editor.guides.highlightActiveBracketPair": false,
But still no change. I even added it again in a Python-specific block, because I learned how to do that when I went on a similar journey trying to change default indent for YAML files:
"[python]": {
"editor.guides.highlightActiveBracketPair": false
}
But still no change.
The answer is:
"editor.matchBrackets": "never",
The setting is listed in the reference:
// Highlight matching brackets.
"editor.matchBrackets": "always",
However, the reference doesn't list the possible options. I correctly guessed "never", but afterwards, I searched for "brackets" in the app settings (Ctrl+,) and found the setting with a drop-down box with all three possible values:
always
near
never
This question already has answers here:
How can I hide indent guides in Visual Studio Code?
(6 answers)
Closed 11 months ago.
What is causing the vertical lines in this image?
Every file I edit has them.
Sometimes they disappear, but then they come back.
I am using VS Code v1.66.1
Here is an image of the lines:
Below, there are 6 settings that have to do with 2 features that sort of overlap each other. VS Code originally only supported standard indent guide highlighting, then they added a feature called colorized bracket pairs. VS Code releases monthly updates 11x times a year. The month, after bracketColorizationPairs was initially released, VS Code added more to bracketPariColorization, which included vertical and horizontal lines. Those lines are more configurable than indent guides, and can render in hard to get situations indent-guides was not able to. Also, they render horizontal, under the line of code that starts a block.
When both indent guides and bracketPairColorization lines are configured to both render, the bracketPairColorization gets priority over the older indent-guides feature.
To avoid all the confusion, add the settings below to your settings.json file, the completely restart your editor. It should solve the problem. Let me know the result.
{
"editor.guides.highlightActiveIndentation": false,
"editor.guides.indentation": false,
"editor.guides.bracketPairsHorizontal": "false",
"editor.guides.bracketPairs": "false",
"editor.guides.highlightActiveBracketPair": false,
"editor.bracketPairColorization.independentColorPoolPerBracketType": false
}
Adding the settings displayed above will turn off the "bright annoying lines in VS Code" which are officially called: Colorized Bracket Pairs. Coloring the brackets, and bracket guides, is a bit beyond the scope of this Q&A, consequently, I won't explain how to change the colors, but I will create an active link around this text your reading, that when clicked, will take you to an answer that explains coloring the guides and brackets.
Go to the menu Code->Preference->Settings and search for "renderIndentGuides". The complete setting should appear as:
"editor.renderIndentGuides": true,
Change it to false.
UPDATE:
Keys had changed since v1.61 - on later version set the following instead:
"editor.guides.indentation": false
When I use VS Code I equip either a light, or dark theme, depending on the time of day, and the lighting in the room. The problem is when I equip a light theme, the
I posted an image of what my editor looks like with my light theme equipped to demonstrate the issue.
I tried BracketPairColorization.enable: "false" as shown in the very bottom image, but it does not work.
Is there a way I can disable the theme-properties that color the bracket-pairs, or setting for disabling the colorized-bracket pairs that works?
I have inspected every settings, and even tried the obvious, as demonstrated in the image below, and figuring out how to turn off the bracketPairColorization feature still eludes me.
How do you completely disable the Colorized Brackets?
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:
https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization
-&/or-
https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization
TL;DR
You can remove this feature by adding the following to the settings.json file.
shortcut: (type ctrl+shift+p, click on Open Settings (JSON))
"editor.language.colorizedBracketPairs": []
or, if you'd like to set specific brackets you can pass them into the array
"editor.language.colorizedBracketPairs": [ ["{", "}"], ...]
I am trying to figure out if it is possible to change the foreground/background color of three things in Visual Studio Code. Is there a setting for these?
matching words
In this screenshot, my cursor is on thisTest in line 15 and so all instances of thisTest are "highlighted". I have not selected the word. My cursor is between the s and T.
selected words
In this screenshot I have selected true.
matching brackets
In this screenshot my cursor is after } and both { and } are highlighted
sorry for being late to the party. Let me share the configuration that works for me. In the settings.json file, you should have the following objects:
"workbench.colorCustomizations": {
"[Hack The Box]": {
// ... omitted for brevity
"editor.selectionBackground": "#ff0000",
"editor.selectionHighlightBackground": "#9fef00",
}
},
In my case, I had to overwrite the config of the Hack The Box I use. Let me recap the keys used:
editor.selectionBackground: manages the selected words scenario
editor.selectionHighlightBackground: manages the matching words scenario
Now, let's switch to brackets. For some time, the extension Bracket Pair Colorizer has been deprecated. To overcome this, you should update to the latest version VSCode. Then, be sure to have these settings (adjust based on your preferences):
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": false,
"editor.guides.highlightActiveBracketPair": false,
"editor.autoClosingBrackets": "always",
Note that these settings are not scoped to a certain theme.
Let me know if this solve your issue!
I want to remove the highlighting of a tag when my cursor is on it. For example Visual Studio Code shows a paragraph tag like this: [<]p[>] where I want it to show like this <p>. See image for an example.
Example image
In your settings.json put:
// Highlight matching brackets when one of them is selected.
"editor.matchBrackets": false,
That will stop the behavior you see, but will do it for all supported languages (so also javascript for example). You can change that setting for only html by :
"[html]": {
"editor.matchBrackets": false
}
It appears that this has changed since the other answers were posted:
Value is not accepted. Valid values: "always", "near", "never".(1)
Use this instead:
"editor.matchBrackets": "never"
Try this
"editor.selectionHighlight": false
Ref -> https://www.samundra.com.np/disable-annoying-highlight-in-visual-studio-code/1666