How to change error styles in VS Code?

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:

回答1:

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!

回答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:

回答3:

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