I'm trying to highlight the error in more aggressive way, is it possible in VS Code?
Basically to change style of this:
UPD: example of aggressive highlight in webStorm:
To edit your settings in settings. json , start by opening the Command Palette with CMD/CTRL + SHIFT + P . From the Command Palette, you have a choice between two commands that edit your settings: The Open Settings (JSON) command will let you directly edit the settings JSON file.
UPDATE - Nov 2020
Properties to set a background color on error styles are finally coming! Merged PR here
editorInfo.background
editorWarning.background
editorError.background
This is not shipped yet - I suppose it will likely ship in the next major version (v1.16). Will update here to confirm the version when this happens.
v1.12 and above
Customization of error underline colors are now available natively via workbench.colorCustomizations
in workspace settings. See the docs here.
"workbench.colorCustomizations": {
"editorError.foreground": "#000000", // squiggly line
"editorError.border": "#ffffff" // additional border under squiggly line
}
Unfortunately, as far as I can find, for now the native customizations are limited to this. To highlight the error with a background color, for example, you will still have to resort to the plugin method below...
v1.7.2 and above
Error styles can be fully customised via css with the vscode-custom-css extension.
Create a file custom-styles.css
with the following (change the styles as preferred)
.monaco-editor.vs .redsquiggly,
.monaco-editor.vs-dark .redsquiggly {
background: rgba(255,255,255,0.2);
border-bottom: 1px solid #fff;
}
Point the extension to custom-styles.css
by adding the following in Preferences > User Settings
(settings.json
)
{
"vscode_custom_css.imports" : [
"file:///path/to/file/custom-styles.css"
]
}
Open up the command palette (Mac: cmd+shift+P, Windows/Linux: ctrl+shift+P) and search for and execute Enable Custom CSS and JS
, then restart VS Code.
You're done!
Screenshot with the above styles applied:
If you get any mistakes in the config, or you make any changes in custom-styles.css
, try restarting VS Code completely, and it should refresh and pick up the correctly configured/new styles.
N.B. Thanks @Stepan Suvorov for raising the github issue and @Matt Bierner for pointing out the appropriate css, so I could get this fixed with the extension.
If any VS Code devs happen to be reading this, firstly thanks - VS Code is awesome - but the built-in error styling is a significant accessibility issue for colourblind people. I'm red-green colourblind and the red squiggle on a black background is quite a strain to notice for me, particularly with single characters.
The ability to customise the error styles is last thing I really missed, switching to VS Code from atom. Official support for this would be a great feature!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With