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
Related
I've recently noticed that when typing out long lines of code, they split into multiple lines after this threshold and it bothers me. enter image description here
Not sure if it was a formatting extension that I put on here years ago, but I couldn't seem to locate it in the settings.
The grey line isn't what causes the wrapping. You can apply settings to have the grey line and not have wrapping. They grey line is displayed according to the editor.ruler setting.
In general text editor terminology, this wrapping you are observing is called "soft wrapping" (when an editor wraps long lines in its rendering of the text, but doesn't actually insert line-break characters, which is called "hard wrapping").
By default, soft-wrapping can be toggled by Alt+z (The command palette command is named View: Toggle Word Wrap).
The default setting of soft wrapping for VS Code is configurable by the editor.wordWrap setting. It has several values it can take on:
"bounded": lines wrap at the minimum of viewport width and editor.wordWrapColumn,
"off": Lines will never wrap
"on": Lines will wrap at the viewport width
"wordWrapColumn": Lines will wrap at editor.wordWrapColumn
The word wrap column is configurable by the editor.wordWrapColumn setting. See also the editor.wrappingIndent and wrappingStrategy settings.
This is a setting called rulers. Go into Settings and search "rulers". Then you will be able to edit the settings.json file. Under "editor.rulers" remove all values in the array so that it is empty. That should solve it.
Editing Python source in VSCode, I notice some color themes highlight use of {braces like this} in non-f-strings. Others don't.
Such highlighting is useful - it often marks error where the string was supposed be an f-string but isn't.
The "Dark+ (default dark)" theme looks like this:
The "Dark (Visual Studio)" theme looks like this (same color for plain string and brace):
How can I change the highlight color for {foo2} in the color theme? I want to make it much more prominent so I'll notice it.
I think changing this requires something in editor.tokenColorCustomizations in settings.json, but what setting in there corresponds to the {foo2} syntax?
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
I have unicode characters that I can't see, that are not utf8, I need to spot them.
I used the extension Highlight Bad Chars (Kevin Wenger) but it's not sufficient, in particular, I don't know which are these characters and I don't want to have to define them in advance.
How can I do this with VScode ?
Find [^\x00-\x7f] and Check use regular expressions.
Taken from Kon Blog
You can try the Gremlins extension which I found better than Highlight Bad Chars (Kevin Wenger) (at least, Gremlins worked out of the box; I couldn't get Highlight Bad Chars to highlight anything).
Also:
Gremlins Last updated: 11/5/2020
Highlight Bad Chars Last updated: 6/30/2018
In Stable Build v1.63 there is a new method for highlighting various unicode characters that might otherwise be difficult to spot in your code. These are the new settings:
You can use these colorCustomizations to change the default orange borders:
{
"workbench.colorCustomizations": {
"editorUnicodeHighlight.border": "#00ff37",
"editorUnicodeHighlight.background": "#f00", // will be in vscode v1.66
// "minimap.unicodeHighlight": "#ff0000", // removed in v1.64
// "editorOverviewRuler.unicodeForeground": "#ff0000" // removed in v1.64
}
Apparently, indicators for these unicode warnings will not be shown in the minimap or overview ruler as of v1.64, see Consider removing the unicode highlight scroll bar decoration
Here is how a unicode zero-width space appears with these settings:
The zero-width character is an invisible unicode character controlled by the Unicode Highlight: Invisible Characters setting above.
From v1.63 release notes: unicode highlighting
Read this article or this article for how invisible or confusable
Unicode characters can be used in Unicode spoofing attacks.
Note that this feature does not detect all possible Unicode spoofing
attacks, as this depends on your font and locale settings. Also, the
detection of ambiguous characters is done heuristically. To be on the
safe side, the restricted mode of the workspace trust should be used
to review source code, as all non-ASCII characters are highlighted in
untrusted workspaces.
The settings editor.unicodeHighlight.invisibleCharacters,
editor.unicodeHighlight.ambiguousCharacters or
editor.unicodeHighlight.nonBasicASCII can be set to false to disable
the corresponding feature.
Individual characters can be excluded from being highlighted and
characters in comments or text and markdown documents are not
highlighted by default.
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.