How to change error styles in VS Code? - visual-studio-code

Question

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:

Answer 1

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!

Answer 2

After almost a year, unfortunately, vscode-custom-css stop working for me; in the meantime vscode introduced some settings to customize the layout.
Try to add this in the user settings:
{
// ...,
"workbench.colorCustomizations": {
"editorError.border": "#ca2323a4",
"editorError.foreground": "#ffffffb7"
}
}
It will show the errors in this way:

Answer 3

You will soon be able to modify the background color of errors, warnings and info. See https://github.com/microsoft/vscode/pull/110112, should be in v1.52.
editorError.background
editorWarning.background
editorInfo.background
Previously, the background color could not be changed.

Answer 4

This works in version 1.58.0:
The following JSON goes into your settings.json, which I accessed via settings -> Workbench -> Appearance -> Color Customization:
{
"workbench.colorCustomizations": {
"errorForeground": "#ffffff",
"editorError.background": "#ff0000",
"editorWarning.foreground": "#ffffff",
"editorWarning.background": "#dddd00",
"editorInfo.foreground": "#ffffff",
"editorInfo.background": "#0000ff"
}
}

Answer 5

To my knowledge, changing the styling of errors is not something that VSCode themes or extensions can currently do. This logic is built in. Here's the css used to render the redsquiggly currently
I suggest you open a feature request against VSCode