Better highlighting on errors to spot them faster

[rgolea]

Hi there!

I've been experiencing a problem when highlighting errors on VSCode. Whenever you have big issues you can spot them on the fly when opening the document. But if your issues are small, you need more time to spot those errors.

As you can see in the image below, these 2 lines have 2 errors and both of them have the problem of not having a semicolon at the end of the line:

The first one is easier to spot than the second (at the end of the parenthesis). The simpler solution for this would be to highlight the entire line in some way (so double highlight) just to spot easily the lines that have errors.

Atom does this the following way:

Thanks and keep up the good work!

• VSCode Version: Version 1.7.2
• OS Version: 10.12.1 (macOS Sierra)

[hoovercj]

One solution to this would be to expose diagnostics for a document through the api. This would allow extension developers to add custom decorations for diagnostics

[rgolea]

@hoovercj Sorry, how can I do that? Or is this for the dev team?

[hoovercj]

@rgolea it is a suggestion for the dev team. It would also allow extension developers to come up with a solution for this issue that I opened a year ago: https://github.com/Microsoft/vscode/issues/1688

[alexdima]

Errors and warnings can be seen through multiple views:

• outside an editor
  • Problems view (ctrl+shift+m)
• inside an editor
  • in the overview ruler (the vertical scrollbar)
  • in the editor via squiggles
  • in the editor via the F8 list

@bgashler1 Do you think we should do more with errors/warnings to make them stand out even more ?

[rgolea]

@alexandrudima the problems view is a good way to view all the errors, but a simple highlight should suffice to bother the user. For example, I am working with a team that isn't quite tidy with their code and the fact that it's highlighted is a good way to bother them and change it. If the errors are just in a simple palette or just underlining the errors, it is not really enough to make a team like that change the code. And I am sure all of us have someone in their team that does or did that.

Is there an update on this feature?

Thanks a lot guys!

[ypresto]

In dark theme, (green) warning shown via squiggles and overview ruler with scroll bar is looks like this:

I think it is hard to see. >_<

(EDIT: Past almost 1 year, and I used to warning marker on right bar now. It might be better to increase contrast.)

[Ciantic]

Here is a great StackOverflow that illustrates this: https://stackoverflow.com/questions/38057227/is-there-a-way-to-improve-linting-errors-highlight-in-visual-studio-code

Spot the errors! I literally spend several minutes my workday searching for these little squiggles, the Atom has figured this out.

Image from the stack overflow question:

P.S. let me elaborate a bit, the main problem comes from this: You are seeing error in the scrollbar, but can't find it. I know I could go and browse the problems view, but then I should navigate to the exact position again from the list view.

[pr-yemibedu]

Hello, I don't really think many people dislike the help the editor gives, they just don't want to be limited that it is the only true way to convey information to the user. If the information is presented as a pub/sub list, then any tool, including the existing problems view can take the information and present innovative visuals to cater to user needs. For example, being able to make it friendly for audio tools or to present statistics like code complexity and to maybe give better context like file type aware containment (functions or module name) and more levels of concern like ignorable or bad style. Thank you. Good day.

[steveostudios]

+1 I think this feature would be fantastic! In Atom having a dot on the left is way more helpful. My eye is constantly looking at the beginning of a line when reading code. Rarely ever do I look over to the purposefully look at the right side of my screen.

[distantnative]

+1

[Valid]

+1. I'd prefer a gutter icon like the Atom example above or how ST handles it, but the squiggly just doesn't cut it for me.

[hoovercj]

I still advocate for exposing a list of all problems in a workspace via the API, both a getDiagnostics function and a onDiagnosticsChanged event.

[simonvomeyser]

+1 Would also love a gutter icon to spot errors more quickly!

[bardware]

Eclipse has these markers on the left hand side. One distinct icon for information, one for warning and one for error

[walt-er]

+1 This would be a massive help, please add! Both the option to change the highlight/underline style and, more importantly, gutter icons!

[sgmonda]

+1

[GriffinSauce]

I'd like to add an accessibility perspective: I am colourblind (red-green, so I see colours but red and green do not pop out like you would expect) and the squiggly line is so thin that I can't make it stand out unless I make it white for max contrast. This is especially true for single character syntax errors.

These solutions would definitely work:

• the gutter dot
• being able to customize the thickness or style of the line (I'd love to make it a solid 3px underline)
• different marking options, eg. in Sublime there is the option for an outline, that is also much more discoverable

Just speaking from my own perspective, but solutions for colourblind also improve the situation for the visually impaired (or people with regular aging eyesight ;) )

[ssrballin]

+1

[balabukha]

It'd be great if you add some additional dots into code. +1

[brettshumaker]

It'd be great to be able to style the errors generated by specific extensions - i.e. making a phpcs extension error look different than one generated by the PHP Intelephense extension.

My specific use case is when dealing with legacy code (or code where I don't control the coding standards) that triggers loads of phpcs errors and warnings, it's nearly impossible to use the Problems tab. Of course I can filter for the extension I really want to see problems for, but there should be a way for users to visually distinguish problems by extension, that data is obviously available.

Note: I think this is relevant to this issue, but I'd be happy to create my own for this feature request.

[pr-yemibedu]

Hello, @brettshumaker that is a helpful idea.

• What would be the limit of how many different styles (like colors) would you want to see?
• What would be the priority for marking an extension with a particular style (like color gradient)?
• What would you expect to see if two extensions see the same problem (overlap styles maybe)?

It seems interesting to have a useful version of this that would also help to know if an extension is even working or if it is being supplanted or usurped. Thank you. Good day.

[Marcelo-Petrucelli]

+1

Visualization is a key feature when dealing with errors and large codes. ^_^

[DanTup]

(FWIW, diagnostics are exposed via an API now, so it may be possible to build this as an extension?)

https://code.visualstudio.com/docs/extensionAPI/vscode-api#languages.getDiagnostics

[chrisgreeffpp]

+1

[greevz]

+1

[mavuio]

+1

[usernamehw]

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

https://marketplace.visualstudio.com/items?itemName=JoeBerria.statusbarerror

[isidorn]

For now are happy with how the usernamehw.errorlens does this. So we recommend users download this extension and try it out. We will probably not change this in vscode core yet.

[isidorn]

Closing this as we will not make changes in vscode core, and extensions can tackle this properly on their end.

[luckylooke]

Sometimes it is very hard to spot error in Monokai theme and typescript. Imho should be better highlighted by default, not by extensions.