Show gutters for errors in vscode?

user_1458413 0
Viewed 2340

I'm using the eslint extension, and its producing errors in my code. However is there a way to show a error-indicating gutter on the lines with a error? Currently I just have this red underline: enter image description here

Is there a way to show a high-contrast gutter next to the line number for errors and warnings?

visual-studio-code
3 Answers

I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:

enter image description hereenter image description here

(offtop: also on screenshot you can see how "Bracket Pair Colorizer" extension works :)

Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css ... better read whole extension instructions)

Create a css file with contents:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  /* background */
  background: #f2e3b3;
  /* underline */
  border-bottom: 3px solid #ffc000; 
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  /* background */
  background: #ffc7c7;
  /* underline */
  border-bottom: 4px solid #ff0000; 
}

And place link to it in settings.json like said in CSS and JS Loader extension instructions

"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,

, then reload...

You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):

border: 1px solid #ff0000;

Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)

enter image description here

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  background: #f2e3b3;
  border-right: 5px solid #ffc000;
  border-bottom: 5px solid #ffc000;
  border-top: 3px solid #ffc000;
  border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  background: #ffc7c7;
  border-right: 5px solid #ff0000;
  border-bottom: 3px solid #ff0000;
  border-top: 3px solid #ff0000;
  border-left: 1px solid #ff0000;
}

This css will only replace squiggle color from green to yellow:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}

As you can see the name of class changed from .greensquiggly to .squiggly-warning, that's why css from previous answer doesn't work. To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.

user_104513050

based on @last-on-space here is a full override + a small enhancement to make sure the styles dont overlap each other on consecutive lines

.monaco-editor .squiggly-warning,
.monaco-editor .squiggly-error,
.monaco-editor .squiggly-info,
.monaco-editor .squiggly-hint {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    box-sizing: border-box !important;
}

.monaco-editor .squiggly-warning  {
    background: #ffc00030;
    border-bottom-color: #ffc000;
}

.monaco-editor .squiggly-error {
    background: #ff000030;
    border-bottom-color: #ff0000;
}

.monaco-editor .squiggly-info {
    background: #0e7fff30;
    border-bottom-color: #0e7fff;
}

.monaco-editor .squiggly-hint {
    background: #a2eeef30;
    border-bottom-color: #a2eeef;
}

also dont forget to add 

"editorError.foreground": "#00000000",
"editorWarning.foreground": "#00000000",
"editorInfo.foreground": "#00000000"
"editorHint.foreground": "#00000000"

under workbench.colorCustomizations to hide the original styles

user_35749190
Related