Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

enter image description here

UPD: example of aggressive highlight in webStorm:

enter image description here

like image 859
Stepan Suvorov Avatar asked Nov 19 '16 19:11

Stepan Suvorov


People also ask

How do I change JSON settings?

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.


1 Answers

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: 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!

like image 90
davnicwil Avatar answered Oct 04 '22 18:10

davnicwil