Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render errors & warnings in gutter #3915

Open
dbaeumer opened this issue Mar 9, 2016 · 28 comments
Open

Render errors & warnings in gutter #3915

dbaeumer opened this issue Mar 9, 2016 · 28 comments
Labels
editor-rendering Editor rendering issues feature-request Request for new features or functionality
Milestone

Comments

@dbaeumer
Copy link
Member

dbaeumer commented Mar 9, 2016

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:
screen shot 2016-02-24 at 3 33 41 pm

Suggested (taken from sublime):
screen shot 2016-02-24 at 3 33 32 pm

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

@dbaeumer
Copy link
Member Author

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

@rafaelbiten
Copy link

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.

@alexdima alexdima added feature-request Request for new features or functionality editor labels Mar 29, 2016
@alexdima alexdima added this to the Backlog milestone Feb 28, 2017
@alexdima alexdima removed their assignment Feb 28, 2017
@kostos
Copy link

kostos commented Jul 17, 2017

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

@alexozer
Copy link

alexozer commented Aug 6, 2017

@dbaeumer any news?

@dbaeumer
Copy link
Member Author

dbaeumer commented Aug 7, 2017

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

@mikew
Copy link

mikew commented Apr 5, 2018

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

@dbaeumer
Copy link
Member Author

dbaeumer commented Apr 6, 2018

@alexandrudima can you help @mikew

@alexdima
Copy link
Member

alexdima commented Apr 6, 2018

@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
Copy link

mikew commented Apr 6, 2018

Sweet, thanks for the pointers!

@SBRK
Copy link

SBRK commented Aug 2, 2018

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

@mikew
Copy link

mikew commented Aug 2, 2018

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
Copy link

linhtto commented Aug 27, 2018

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
Copy link

ghost commented Aug 27, 2018

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
Copy link

tommai78101 commented Nov 5, 2018

@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
Copy link

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

@ianizaguirre
Copy link

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:

vscode-squiggly-error-to-outline-error

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

@tommai78101
Copy link

tommai78101 commented Nov 10, 2018

@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
Copy link

trusktr commented Jun 24, 2019

@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
Copy link

trusktr commented Jun 24, 2019

@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
Copy link

ianizaguirre commented Jun 24, 2019

@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
Copy link

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

@JosephTLyons
Copy link

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.

@alexdima alexdima changed the title [feature request] mark errors in gutter Render errors & warnings in gutter Oct 25, 2019
@jmadkins
Copy link

jmadkins commented Dec 2, 2019

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

Screen Shot 2019-12-02 at 01 19 56

Screen Shot 2019-12-02 at 01 20 10

@jnelken
Copy link

jnelken commented Jan 12, 2020

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

@JosephTLyons
Copy link

JosephTLyons commented May 6, 2020

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
Copy link

bugpowder commented Sep 24, 2020

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
Copy link

trusktr commented Jun 4, 2022

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
Copy link

@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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editor-rendering Editor rendering issues feature-request Request for new features or functionality
Projects
None yet
Development

No branches or pull requests