How can I replace this annoying white rectangle with anything nicer?
I tried to disable it in user settings using
"editor.matchBrackets": "never",
but it didn't work.
That highlighting appears to be editor.selectionHighlightBackground assuming you selected editor. There is also editor.selectionHighlightBorder you can change. Like so:
"workbench.colorCustomizations": {
"editor.selectionHighlightBackground": "#e90505",
"editor.selectionHighlightBorder": "#ff000080" // digits 7 and 8 are opacity
}
You can turn off this highlighting of selection matches by disabling this setting:
Editor: Selection Highlight
Such highlighting could also be the result of find matches. Please advise if that is what you used, the Find/Replace widget.
Related
I want VSCode line highlight to look like this
Currently, it looks like this
Basically I dont want VSCode to highlight the entire line.
Look at the options for this setting:
Editor: Render Line Highlight
options are none, gutter, line and all
You cannot just highlight the text part of the line. If that is what you want, look at the gutter option perhaps. If you just want to reduce the obviousness of the highlight, use #rioV8's answer - the last two digits in the hex are opacity.
add this to your settings.json (global or project)
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000000"
},
Set the line highlight to a transparent color
In the image below I'm actually in "rename" and I'm highlighting something but there's no highlight. You'll notice there's no cursor as well because it's highlighting. This is driving me a bit bonkers because I'm either counting how many left/right arrow keys I'm moving and such to know where I am. I tried the following colors but none of these seem to do anything (in the Explorer):
"workbench.colorCustomizations": {
"editorRuler.foreground": "#fc199a22",
"editor.selectionBackground": "#ab3beb3f",
"editor.selectionHighlightBackground": "#136460e3",
"editor.findMatchBackground": "#00cc44a8",
"editor.findMatchHighlightBackground": "#d0ff004d",
"scrollbarSlider.background": "#FC199A2c"
},
I tried inspecting the element in the developer console in VS Code but the rename closes when it blurs out of the field which I need to do to select the element to know what the CSS class is to style it.
I didn't see a "rename" or highlight color for the explorer here either: https://code.visualstudio.com/api/references/theme-color#editor-colors
Any help would be super appreciated.
You can use the following property:
"selection.background" : "#FF0"
The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
A caveat to this approach is that it is applied globally, not just the explorer view
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.
I'm working on an extension which colors some text within the editor based on some condition. Unfortunately, it looks like the style applied to the text is also applied to the whitespace characters when the user has editor.renderWhitespace enabled.
I can't find anything in the API which gives the option of ignoring the whitespace when coloring.
Does anyone know of a way to leave the color of the whitespace characters intact?
There is a setting to change the color and opacity of whitespace characters when made visible as discussed here. It says that you could use:
"workbench.colorCustomizations": {
"editorWhitespace.foreground": "#FF0000"
}
The colors for the whitespace is taken from the invisibles property in themes, so the color is customizable via themes.
<key>invisibles</key>
<string>#3B3A32</string>
for more information please read this issue here
I don't want Visual Studio Code to highlight matching brackets, all occurrences of the same variable, etc. I find it very distracting. However, I can find no way to disable this feature.
The only highlight options I seem to be able to change are "editor.selectionHighlight" and "editor.renderLineHighlight", and neither work.
Is it possible to disable "matching highlighting"? Or maybe to edit my theme, so that the highlight color and highlight border are the same as the background color?
There are different types of highlighting:
1. Syntax highlighting (place cursor inside variable)
"editor.occurrencesHighlight": false
2. Selection highlighting (similar chunks in document)
"editor.selectionHighlight": false
3. Matching brackets highlighting
"editor.matchBrackets": false
There's a second way - make them less obtrusive (or completely transparent):
"workbench.colorCustomizations": {
"editor.selectionHighlightBackground": "#0000", // similar selection
"editor.selectionHighlightBorder": "#0000",
"editor.wordHighlightStrongBackground": "#0000", // syntax variable assignment
"editor.wordHighlightStrongBorder": "#0000",
"editor.wordHighlightBackground": "#0000", // syntax variable
"editor.wordHighlightBorder": "#0000",
"editorBracketMatch.border": "#0000",// brackets
"editorBracketMatch.background": "#0000",
}
Try this one "editor.matchBrackets": false in your Preferences - User/Workspace setting
"Occurrences Highlight" is the setting you are looking for.
Try going to Preferences-> User Settings
In the settings.json to the right add:
"editor.selectionHighlight": false
The same achievement from #Alex's answer could be done from the VSCode settings.
Go to Preferences -> Settings and there search for Highlight.
A lot of option would appear, but the ones useful would be under the Text Editor section.
Also, you could decide if change it globally (through the User Settings) or just for that window (Workspace Settings).