Render errors & warnings in gutter

[dbaeumer]

From @koulmomo on February 24, 2016 23:37

It would be good if the extension would mark the line at which errors occur along with JUST where it exactly occurs (this could just be a mark in the gutter at the line the error occurs).

This would make it easier to quickly scan through files.

Current:

Suggested (taken from sublime):

Copied from original issue: microsoft/vscode-eslint#33

[dbaeumer]

Moving to @alexandrudima. This should be a general editor feature.

[rafaelbiten]

Having this would be really nice. Another thing I would suggest, if possible, is to add options to display the error message on the bottom bar (Sublime works that way and it's quite helpful) or maybe activate the tooltip when on the error line or when cursor is over the offending code.

Also, is there any keyboard shortcut to activate the tooltip for these errors? I'm using esLint and I can only see the error when hovering over the text with the mouse (HoverProvider?). I wish I could also activate this via keyboard shortcut.

[kostos]

@dbaeumer Is there any estimations when the feature will be implemented?

[alexozer]

@dbaeumer any news?

[dbaeumer]

The item is still on the backlog and not planned for any specific iteration right now. However a PR is always welcome.

[mikew]

This drives me absolutely crazy, where would one look to get started on this?

[dbaeumer]

@alexandrudima can you help @mikew

[alexdima]

@mikew This is where markers are transformed into editor decorations: https://github.com/Microsoft/vscode/blob/8e5a374372b8393906c7e380dbb09349c5385554/src/vs/editor/common/services/modelServiceImpl.ts#L116

And here are all the possible options for an editor decoration:
https://github.com/Microsoft/vscode/blob/8e5a374372b8393906c7e380dbb09349c5385554/src/vs/editor/common/model.ts#L58

You could attempt to use glyphMarginClassName, linesDecorationsClassName or marginClassName and then you need to define some CSS to target those class names.

[mikew]

Sweet, thanks for the pointers!

[SBRK]

@mikew did you make any progress on this ?
Having a global view of lint problems on files is virtually impossible for now...

[mikew]

I have not got the chance to look at this, no. Also, this isn't really about a global list of lint errors found, just highlighting those in the current file better.

[linhtto]

It would be amazing to be able to use your own icons for the gutter marks as well! This is what Sublime offers, and is a very nice and endearing feature. If this is implemented and the gutter marks are on the left of the line numbers like in Sublime, it'd be even better than Sublime because the git indicators are in between the line numbers and the text, so they won't interfere with each other.

[ghost]

A way to do this without interfering with the breakpoints is to offer different gutter "modes." Extensions will be able to implement their own modes which can display only a single group of glyphs when enabled. So, for example, debugger mode will only display breakpoints/logpoints until the mode is toggled at which point the glyphs disappear.

I think most people don't require debug points when writing/reading code so it's kind of wasteful to not utilize the area more efficiently.

[tommai78101]

@alexandrudima

@mikew This is where markers are transformed into editor decorations: https://github.com/Microsoft/vscode/blob/8e5a374372b8393906c7e380dbb09349c5385554/src/vs/editor/common/services/modelServiceImpl.ts#L116
And here are all the possible options for an editor decoration:
https://github.com/Microsoft/vscode/blob/8e5a374372b8393906c7e380dbb09349c5385554/src/vs/editor/common/model.ts#L58
You could attempt to use glyphMarginClassName, linesDecorationsClassName or marginClassName and then you need to define some CSS to target those class names.

If I add some properties, like editorBreakpointBorder, editorBreakpointForeground, and editorBreakpointBackground to the file codeEditorWidgets.ts, where else do I need to modify, so those properties can be seen by the program?

I'm trying to understand how to add new properties by extending the properties of editorErrorForeground, and work my way up/down.

[tborychowski]

this is already possible, isn't it?:
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

[ianizaguirre]

I found a way to change the error red squiggly line into an outline style (kind of like Sublime Text), so errors are much easier to spot! I like outlined errors MUCH better over small squiggly lines, because I find the squiggly lines to be difficult to see when scrolling through a file.

So this was my end result in VS Code:

I wrote down the steps I followed to get this to work HERE

[tommai78101]

@ianizaguirre Can you do all of this without the use of extensions? The goal is to create a PR, so the new code will be merged into VS Code, thus supporting the feature at a native level.

[trusktr]

@dbaeumer From microsoft/vscode-eslint#162 (comment)

This should happen in VS Code itself to make this consistent with other errors and warnings. It dups #3915

Could gutters just be more pluggable instead? Seems various gutter extensions clash with each other and over-write the content. Instead, it's be nice for plugins to register a custom gutter.

I think this approach would lead to more options from the community (VS Code's own solution could use the new mechanism as well).

[trusktr]

@tommai78101 That's not really an extension, it's just some simple CSS that @ianizaguirre loaded into VS Code. Although, it would be possible to make an extension to load the CSS...

[ianizaguirre]

@trusktr I found an extension for gutter marks, this might be of use to those interested and are okay with using a plugin: https://marketplace.visualstudio.com/items?itemName=IgorSbitnev.error-gutters

I agree though, plugin gutters crash and overlap each other. It would be best to have this built in natively - like how Sublime code does it.

[JosephTLyons]

The extension suggested by @ianizaguirre is really great, but it would be a nice feature to have this built into VS Code.

[JosephTLyons]

Only a few hours later and I realize what others are saying. The errors symbols from Error Gutters cover breakpoints, so this isn't a good solution. Native support is probably the way to go.

[jmadkins]

In a comparison between Atom and VSCode I find VSCode's highlighting extremly distracting.

[jnelken]

This works very well for me:
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens&ssr=false#qna

[JosephTLyons]

Please please please! The biggest source of pain when using VS Code are errors and warnings.

1. I sometimes miss errors because I'm entirely trained to scan the gutter for errors. I very easily miss them because they sit in the code itself. I know that they are available on the right side as well, but you cannot hover over them and get any details. 3rd party packages don't work out too well here either because they sometimes interfere with breakpoints. Having errors in the gutter would make this so much easier. If the team simply has no desire whatsoever to add gutter errors, then please do something to make the errors more obvious in the code, as mentioned by @ianizaguirre

2. I have a very hard time getting my mouse over the actual error squiggly line so that I can see the error modal pop up - most of the time, VS Code thinks I'm wanting to see information on that code above the error and gives me information on that instead of the error. This takes away a lot of time and can be frustrating.

3. I would love to have a central place for all errors and warnings. If this already exists, I would love to know about it.

4. As @jmadkins said, the underlining of massive blocks of code is extremely distracting at times, I much prefer the way Atom handles it.

This has been open for over 4 years, there has to be some way of pushing the leads to put priority on this.

[bugpowder]

I'd like to add my support for this too. VSC needs:

(a) better in-the-editor visibility for errors/warnings (the swiggly lines don't cut it)

(b) a way to show errors/warnings in the gutter

(c) an official system to support more than one annotation in the gutter (e.g. error + breakpoint). Without one overriding the other. Perhaps automatically resize the gutter to hold 2 or N annotation icons if there are more than 1 in any line.

[trusktr]

If we could get both gutter marks, as well as the alternative an option to highlight instead of squiggly-underlying as mentioned in #3915 (comment), that'd be phenomenal.

@ianizaguirre did you make a separate issue for error highlight mode? It may merit a separate issue for tracking (and so we can vote on that separately)

[DanKaplanSES]

@ianizaguirre

I wrote down the steps I followed to get this to work HERE

This link 404s. Maybe that's intentional because the steps don't work anymore (I haven't tried them yet), but here's a permanent link to the content: https://web.archive.org/web/20201126094945/https://www.izaguir.re/how-to-make-vscode-error-highlighting-look-more-like-sublime-error-highlighting/