This question already has answers here:
vscode bracket pairs changed colors with v1.67
(3 answers)
Closed 10 months ago.
So I was casually coding sorting algorithms and I don't know what I did exactly (maybe clicked somewhere, did a key combination) but now some colors of my theme have changed. I'm still using the same theme as I was before (which is called Monokai dark soda) but brackets are all of a different color than before
Here is how it looks now :
Before, the brackets used to be always white. Now you can see that most of them are yellow, and some of them are pink or blue.
I mean look at that last line, it's horrible!
I just found the answer. I had accidentally turned on "Bracket pair colorization". (Edit: actually it had been turned on by recent update 1.67)
The solution to fix that is to go to File > Preferences > Settings > Text editor > Bracket pair colorization
and turn it off.
I've been transitioning to using VS Code for my python projects after previously working with the full Visual Studio, and some of the key bindings/features I'm used to in Visual Studio I can't find the equivalent for in VS Code. I'm not sure if the bindings are different or if the feature doesn't exist.
One feature in particular that I can't figure out is if it is possible to do multi-line select past line endings. In Visual Studio, using Alt + Click + Drag, lets you create a multi-line cursor or box selection, that can extend past line ends, implicitly adding spaces as needed so that the right-most side of the box stays uniform. In VS Code, if you drag the selection past the end of a line, the selection box won't go past the end of the line, even if other lines in the selection extend past it. In Visual Studio, this feature even goes further, as you could Alt + Click + Drag even in areas with no characters as all, creating a multiline cursor or box selection to the right of all existing line ends.
This isn't an essential feature, but it's very handy in making code easy to read. For example, when assigning several dictionary entries all at once, with varying key lengths. Is it possible to do something like this in VS Code?
Edit: The feature I'm looking for is virtual spaces (thank you Mark for providing the feature name), which seems to be an outstanding feature request in VS Code.
The short answer is no, vscode does not have a box select, past line ends, built-in. VS Code does not have the concept of virtual spaces which would be necessary to make this work yet.
Below is the issue, lots of comments, not that many upvotes. Upvote it.
https://github.com/microsoft/vscode/issues/5402
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": [ ["{", "}"], ...]
When writing a source file in VS Code that is styled with spaces of a specific width (maybe determined by the .editorconfig file), how can I force VS Code to treat the spaces like tabs without reformatting the file?
For example, the indent width may be 4 spaces, so rather than displaying 4 spaces in my editor, I'd rather see one tab space character with a width of 4 spaces.
The selection aspect of space-tabulated code is supported with VSCode 1.52 (Nov. 2020) and:
Sticky Tab Stops when indenting with Spaces
If you prefer to indent your code with spaces, there is a new setting called editor.stickyTabStops, which makes VS Code treat cursor movements in leading spaces similar to tabs.
Appearance
You said vscode is:
displaying 4 spaces in my editor
I assume that means you're getting those little Interpunct dot characters coming up like this ····
If you want those to go away, so they appear more consistent with tabs, go into VScode settings (JSON) and enter the following:
"editor.renderWhitespace": "selection"
Assuming everything else is default, both tabs and spaces should be rendered as regular whitespace. But that alone it doesn't really help, because it doesn't allow you to distinguish nested structures i.e. you can't tell how many levels of indentation you're at.
To fix that, there's 2 things.
(minimum) Set indent guides explicitly in your user settings, this will render vertical lines at each indentation level, no matter if the file is using tabs or spaces:
"editor.renderIndentGuides": true
(optional extra) If you want to take it further, there are a few extensions you can try, but the one i recommend is indent-rainbow. There are lots of options for it, but i have mine config'd so after a certain level of indentation it becomes more obnoxious, because i treat it as a code smell i.e. i like to minimize how much i nest if possible.
The end result of doing all this is that tabs and spaces are rendered exactly the same way, and you can't tell the difference unless you have part of your code highlighted:
Behavior
To make the behavior of indentation more consistent, the following should be in your settings if it's not already applied by default:
"editor.detectIndentation": true,
"editor.insertSpaces": true,
"editor.useTabStops": true
As for this:
source file in VS Code that is styled with spaces of a specific width (maybe determined by the .editorconfig file)
I don't think this is possible, or at least not natively. You may be able to find/write an extension that can do detection based on tabsize since there is in fact a property called:
"editor.tabSize": 4,
Not sure if this will help, but you can do selective setting overrides based on filetype, for example:
"[yaml]": {
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.autoIndent": "advanced"
}
When I place my cursor on the extremity of a block (represented by the white drawn cursor on the picture below) VSC highlight both the ending and the starting symbol of that block.
The red line on the picture represent the starting and the ending of that block. Where can I set the option for VSC to automatically use a background color to highlight the current selected block ? (I am really more of a visual guy and I like to feel where's my current locations when I am coding.)
You are going to need an extension to do that, it isn't built-in. Try:
Indented Block Highlighting
I am not sure it supports all languages but see if it works in your case.
Bracket-pair-colorizer does something similar but more subtle. See "bracket-pair-colorizer-2.showHorizontalScopeLine".
.
And see How to change indent guide line color between brackets in VSCODE? - perhaps highlighting the active indent guide will be enough for you?
Using (in your settings.json):
"workbench.colorCustomizations": {
"editorIndentGuide.background": "#bbb",
"editorIndentGuide.activeBackground": "#f00e0e",\
}