I'm just getting VS Code set up to use, one of the things I like to have is highlighting that's visible so I don't have to really look for it. I have the editor.matchBrackets setting set to true, so my brackets are highlighted when one is selected. However, the highlighting is so faint (very thin lines) that it's hard to see (I'm using the Dark+ theme, one of the default themes). Is there a way to affect the bracket highlighting, such as the color, line size, etc, so that it's easy to see?
Thanks.
You can try this extension Subtle Brackets by modifying the following the default values in the .json settings of VS Code:
I changed it like this:
"subtleBrackets.bracketPairs": [
"{}",
"[]",
"()",
"<>"
],
"subtleBrackets.styles": {
"global": {
"color": "yellow",
"borderWidth": "1px",
"borderStyle": "none none solid none"
}
}
Don't forget to set to "false" the value of .matchbrackets of VS Code.
"editor.matchBrackets": false
you can add this setting to your settings.json file to apply lighter color brackets. You can just customize these colors of your interest. Bracket pair colorization should be enabled in settings
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#ffffff",
"editorBracketHighlight.foreground2": "#ffb534",
"editorBracketHighlight.foreground3": "#d549ff",
"editorBracketHighlight.foreground4": "#44ecff",
"editorBracketHighlight.foreground5": "#9eff3e",
"editorBracketHighlight.foreground6": "#2e74ff",
"editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
}
If you want to have the same color for all nested brackets, you can disable "independent color pool per bracket type" in the settings.
Unfortunately, you can't do that.
You should look for another Theme that fit your needs, or maybe upvote this issue in VS Code repo which seems similar to your needs. This issue also suggest install an extension that colorize brackets. It's not a solution, but might help.
Related
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'm using the One Dark Pro theme but I don't like the color highlighting of indent.
This setting doesn't help:
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground": "#9e9e9e"
},
It is not editorIndentGuide because I cannot even turn them off with:
"editor.renderIndentGuides": false,
I guess these are drawn by Bracket Pair Colorizer 2 extension, so if you want to get rid of those "bracket scope" lines, try to configure
"bracket-pair-colorizer-2.showVerticalScopeLine": false,
"bracket-pair-colorizer-2.showHorizontalScopeLine": false,
(and restart VSCode; on my install this change in config does not catch up upon save).
As suggested in the accepted answer, these lines are drawn by your Bracket Pair Colorizer 2 extension. Currently, the extension will always draw those "bracket scope" lines using the color of that matching bracket. From your example, since you selected the purple parenthesis, the bracket scope line is purple in color.
As a workaround, you can customize the colors used to colorize the brackets using the following option:
"bracket-pair-colorizer-2.colors": [
"Gold",
"LightSkyBlue",
"#ff0000", // <-- eg. Replace the purple color ("Orchid") with a red color
],
Feel free to replace the red color HEX code (#ff0000) to whatever color you like. You can visit the extension's README page to learn how you can customize the extension settings.
Now that the bracket-pair-colorizer-2 are deprecated (2022-03-24), the new solution is:
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#ffe625",
"editorBracketHighlight.foreground2": "#00ff15",
"editorBracketHighlight.foreground3": "#25deff",
"editorBracketHighlight.foreground4": "#c825ff",
"editorBracketHighlight.foreground5": "#ff0077",
"editorBracketHighlight.foreground6": "#ff803b",
"editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"
}
}
Another solution from deprecated bracket-pair-colorizer-2.
I am in the process of migrating from Atom to VS Code, as it seems to be what all the cool kids use these days.
In atom I was able to highlight the current line number as pictured (the blue highlight in the gutter).
Is there a way to do this in VS Code? With a setting or extension? Can't find a way to do it, and really missing that obvious at-a-glance indication of where I'm working.
(I know that I can add a background to the current line itself, but this is too intrusive to the code, especially working with a variety of languages in different colours.)
Thanks!
You could try
"editor.renderLineHighlight": "gutter"
UPDATE
In an ideal world I'd want both the gutter and the line itself highlighted, but in 2 very different colours - sadly that one doesn't seem possible, but this option is better than nothing!
Well, you may try something like settings below, liner number in different color as well as box for the line
"editor.renderLineHighlight": "all",
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000000",
"editor.lineHighlightBorder": "#0000ff"
}
To address dark and light themes
In the settings.json file add something like:
"workbench.colorCustomizations": {
"[Default Dark+]": {
"editor.lineHighlightBackground": "#00000071",
},
"[Default Light+]": {
"editor.lineHighlightBackground": "#0000003f",
}
},
I just want to disable the character highlighting that happens on angle brackets, as I find the square box to be annoying. Is there a way to turn it off?
You can search keyword highlight in setting, and you change Editor:Match Bracket to never, like this:
You can use the following:
// Highlight matching brackets when one of them is selected.
"editor.matchBrackets": false, however it disables highlighting all the brackets not only the angle brackets.
You can always make the bracket border color transparent with these settings:
"workbench.colorCustomizations": {
"editorBracketMatch.border": "#0000",
"editorBracketMatch.background": "#000"
}
This will make the border transparent and the bracket's background black - or just make it something less obtrusive given your editor background. But again, this will apply to all brackets, not just angle brackets.
Unfortunately it's still unconfigurable. Maybe they will improved it.
Here is my ticket in VSCode repo that you can watch - https://github.com/microsoft/vscode/issues/73521.
As long as they do not improve, you have two ways
Solution with addon:
Disable native bracket matching: "editor.matchBrackets": false,
Install addon from https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets
Customize it for better visuality, example:
"subtleBrackets.style": {
"borderStyle": "solid",
"borderColor": "#CC7832",
"borderRadius": "3px",
}
Native solution without addon:
You can disable bracket matching highlight only for specific language:
"[html]": {
"editor.matchBrackets": false
}
Note that this is not a perfect solution, because when using html in php files, angle brackets are still highlighted
You can add this
{
"editor.matchBrackets": "near"
}
somewhere in ~/.config/Code/User/settings.json. This means that all projects inherit behavior.
This way, only when you move the cursor over a bracket, the corresponding one is shown.
Yaa. there is a solution for hiding the annoying marking I just found. go to the setting button in left bottom side then write- angle bracket -in the search option and search as well. Then press the "text editor", a selecting option will come in the top named "Editor:Match Brackets". Select "Never" and your work is done here. See the attached picture if needed.
Is it possible to customize the brace highlighting in Visual Studio Code? It seems just about everything else is customizable through user and workspace settings, as well as textmate themes. Regardless of the syntax highlighting you employ, the braces always have the same light gray outline/rectangle around them. I don't see an existing user/workspace setting or a textmate scope that addresses this specific feature.
Ultimately I'd like to have a solid color highlight of matching braces, similar to what you would get with the default dark theme in Visual Studio 2013 and 2015.
For future reference, vscode now has the option to change the color of bracket highlighting by adding this to settings.json:
"workbench.colorCustomizations" : {
"editorBracketMatch.background": "#f008",
"editorBracketMatch.border": "#f00"
}
Formats supported are #RGB, #RGBA, #RRGGBB, #RRGGBBAA. The rgba(255,255,255,1) format that seems to work in other places in the settings file appears to not work here.
Only feature that is still missing regarding this subject is bracket highlighting when the cursor is between brackets. They only highlight when one of the brackets is selected. I did not find a current solution searching trough the Settings or workbench.colorCustomizations.
Update 2018.04.21
There is now a plugin called Bracket Pair Colorizer that does shows the current brackets besides the line number no matter where the cursor is placed within the brakes. But on slower hardware (3nd generation i5 laptop) i encountered slowdowns with it when editing large files (3000+ line php file). And alternate plugin that performs well on the same file and highlights the current indentation is Guides.
Update 2019.11.10
VSCode 1.40 now highlights the brackets enclosing the cursor.
Update 2021.08.09
as #desilicius mentioned in the comments Bracket Pair colorizer is no longer maintained by the author. He offers as an alternative Blockman - Highlight Nested Code Blocks which has the same functionality but has a totally different look and Highlight Matching Tag which is a great plugin but only works on html (and jsx) tags as the name implies.
Update 2021.08.13
The VSCode team decided to add bracket pair colorization as a built in feature. It is worked on right now with improvements of 10k x the speed of BPC2. The discussion can be found here
You can try Bracket Pair Colorizer 2 Extension.
Highlighting and changing colors of brackets in VS Code is now possible.
You can try this extension Subtle Brackets by modifying the following the default values in the .json settings of VS Code:
I changed it like this:
"subtleBrackets.bracketPairs": [
"{}",
"[]",
"()",
"<>"
],
"subtleBrackets.styles": {
"global": {
"color": "yellow",
"borderWidth": "1px",
"borderStyle": "none none solid none"
}
}
Don't forget to set to "false" the value of .matchbrackets of VS Code.
"editor.matchBrackets": false
Update September 2021: The "Bracket pair colorization" feature is now available in VS Code as of the August 2021 (version 1.60) update.
Add this to your settings.json file:
"editor.bracketPairColorization.enabled": true
After saving the file, brackets should instantly be colorized.
Also maybe you will like VSCode extension "Blockman", it highlights nested code blocks. (I am the author of Blockman).
The VSCode extension "Blockman" is a new approach of dealing with brackets, well, it does not highlight brackets themselves, but it renders blocks based on the brackets (curly/square/round brackets/braces), and I think it is a better visual helper for our eyes to perceive code structure more easily, to understand code structure more quickly and more comfortably.
If you want to remove brackets color and border, you can use hex colors with 0 opacity in your settings.json:
"workbench.colorCustomizations": {
"editorBracketMatch.border": "#ffffff00",
"editorBracketMatch.background": "#ffffff00",
}
You can overwrite any theme:
"workbench.colorCustomizations": {
"[*]": {
"editorBracketMatch.border": "#ffffff00",
"editorBracketMatch.background": "#ffffff00",
}
}
In order to target a specific theme, replace the glob character, *, with the theme name.
Custom brace highlighting will be even more precise with VSCode 1.76 (Feb. 2022), with issue 170497 and PR 172758: it brings support for coloring a subset of the matched bracket.
Example:
"[plaintext]": {
"editor.language.brackets": [
["{", "}"],
["(", ")"],
["[", "]"]
],
"editor.language.colorizedBracketPairs": [
["{", "}"],
["<", ">"]
]
},
Gives:
This is available with VSCode Insiders today.