Offer code mark styles and gutter marks

[dbaeumer]

From @darkred on July 10, 2016 23:30

(Using VSCode 1.3.0 in win 10 x64 build 10586 with vscode-eslint extension 1.10.18).

Currently the code marks(for errors and warnings) appear only as squiggly underline (i.e. as spellchecker errors in browsers, e.g. Firefox, Chrome):
(the error is in red, and the warning is in green)

My suggestion is to offer more code mark styles (ideally the outline style, as it highlights the errors/warnings the best way -see below- ) and gutter marks :
(with the errors to be in red, and the warnings to be in yellow, as ESLint itself uses these colors - not green)

(here is another screenshot)

It's more easy to distinguish the errors this way.

Thank you

---

For reference SublimeLinter3 package offers five different code mark styles :

• fill,
• outline (the default style),
• solid underline,
• squiggly underline, and
• stippled underline

and two types of gutter marks:

• errors, and
• warnings

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

[dbaeumer]

From @AndrewIngram on July 11, 2016 9:15

I found myself searching around for a setting to enable this, I guess i've been heavily spoiled by Atom and Sublime. This is pretty important for me, because I find the squiggly lines to be far too difficult to see when scrolling through a file.

[dbaeumer]

From @glebec on July 11, 2016 18:28

I second the use of yellow for warning. For one thing, red-green is always a poor UI choice as it ignores the 7%+ of XY-chromosomal people who have red-green color blindness. For another, it matches ESLint. Also yellow just feels more like a warning than green, culturally speaking.

Also, the gutter marks can be very helpful, though in the case of VSC it might require some different style as VSC's breakpoint markers are very similar to SublimeLinter error marks.

[dbaeumer]

Moving to vscode since such a feature has to be implemented in the editor.

[dbaeumer]

@egamma @bpasero I also like the suggestion of using yellow for warning instead of green. Green in dark themes is very hard to read.

[bpasero]

I think we only use green because VS does? Not sure...

[darkred]

I've noticed that Visual Studio show errors as squiggly underline as well.
So, this style was picked for consistency with VS.
But, honestly, showing errors/warnings as squiggly underline is very difficult to distinguish when scrolling through a file (often I have a hard time locating them, especially when the error is a single character, eg. a quote ' or a bracket } or $ ),
plus, that this kind of style suggests more to that is a spellcheck error.
e.g.. in the screenshot:

both while (error) and console (warning) seem to be just typos, misspelled words - not the result of static analysis.

The best would be the user to be able to choose the style he prefers.
(IMHO the 'outline' style highlights the errors/warnings perfectly).

[glebec]

The best would be the user to be able to choose the style he prefers.

Agreed — I, for example, have a different preference from you in that I like "squiggly" over "outline."

[egamma]

@bpasero yes green was picked for consistency with VS. Need to check what VS does in the dark theme @bgashler1 ?

[stevencl]

I believe VS uses a more vibrant green:

[dbaeumer]

For me it is not only readability. Green conveys the wrong information as well. And the warning icon is usually a yellow triangle with an exclamation mark. So yellow would be IMO the better color for this even if VS uses a more vibrant green.

[stevencl]

I contacted the VS team to learn more about the reason for choosing green. Originally it was yellow (VS2003 I think) but not many people could recall why it was changed. The general consensus though was that it was probably because of the poor contrast that yellow has on a light background.

Yellow definitely makes more sense but we will need to see if we can come up with a colour that looks right and has appropriate contrast in the light theme. @bgashler1 - can you help choose an appropriate colour?

[glebec]

@stevencl is there any specific reason we cannot do as @darkred suggests and let warning & error colors be user-defined, or even theme-defined?

[bgashler1]

(This comment is regarding only the color, not the styles...)

A while ago, Microsoft Word set a precedent for using red squiggly lines for errors in spelling and green for warnings of possible grammar mistakes. This is likely why Visual Studio followed suite, because it was a pattern that people were familiar with in other software and the concepts were similar.

To make the software more inclusive for color blindness, recent versions of Word now use blue instead of green for warnings (see below).

I propose we use blue here for warnings. I find blue to work well in both light and dark settings.

[bgashler1]

@glebec As far as whether we can do user-defined styles or theme-defined styles for errors and warning, I will put this on our UX sync agenda to get our team's feedback. Thanks for the great suggestion!

[coreh]

If the setting is added, it would be really nice for it to support the "stippled" / dotted underline, since that look is the native look for the spell checker on Mac OS X

In fact, it should probably be the default look on OS X, if no option is specified.

[gold]

I just switched from Atom to VS Code about a week ago. I have a short list of things that need to fixed. This issue is one of them. Arguing over which color is right or wrong will never solve the problem for everyone. Choose reasonable defaults as best you can (green seems weird). But allow the user to override the default styles. Additionally, optionally allowing corresponding error/warning glyphs in the gutter is a great idea. Also while I'm in rant mode, expressing the theme in XML is so old fashioned. I know it's a plist thing, but honestly, do you have to slavishly copy Apple even when it's wrong?

[DavidBabel]

For reference SublimeLinter3 package offers five different code mark styles :

fill,
outline (the default style),
solid underline,
squiggly underline, and
stippled underline

For me this is one of the main thing i miss in vscode. Here is the reference : https://sublimelinter.readthedocs.io/en/latest/mark_styles.html

It can be a good idea to consider to add another mark style like a "red color" for the text in error.
That's the case in IntelliJ, as you can see in this video tutorial for typescript : https://youtu.be/n6RoVyZEsv4?t=13m20s

Each time an error occurs, the text become red.

Does anyone can confirm me it's not possible yet ?

[javiayala]

+1
I would love to see a yellow/red mark in the gutter like in atom. The green squiggly underline is just hard to see and easy to miss. I need a way to customize this.

[DavidBabel]

Some outline actually exists in vscode atm. Like when you target a bracket and it highlight the corresponding one :

Don't know if it can be used elsewhere

[donaldpipowitch]

Could this issue be tackled in multiple steps to see faster progress?
E.g. switch warning color from green to yellow (or blue?) in the first step. Than allow different error/warning highlights like dotted lines, gutter marks, outlines, etc.

[karbon0x]

Any update on this?

[DHedgecock]

It is definitely possible to configure the colors for linter errors/warnings as of the last release 🎉🎉🎉. You can use these variables in your preferences:

Errors and warnings:

editorError.foreground: Foreground color of error squigglies in the editor.
editorError.border: Border color of error squigglies in the editor.
editorWarning.foreground: Foreground color of warning squigglies in the editor.
editorWarning.border: Border color of warning squigglies in the editor.

like:

"workbench.colorCustomizations": {
    "editorWarning.foreground": "#336699",
    "editorWarning.border": "#336699"
  }

If you have a favorite theme, you can also put in a pull request to have them add it in the theme. I've done this in the Panda Extended theme:
https://github.com/DHedgecock/vscode-panda-extended/blob/master/dist/Panda%20Extended.json

[glebec]

At long last! So our current status is as follows:

• error line colors
• error line styles
• error gutter marks

IMHO the first was the most important, the others are niceties which I think justify keeping this issue open but which aren't as big quality of life improvements.

[DHedgecock]

Actually it looks like it's also possible to have gutter icons now:

^ that screenshot is from pulling down the codemetrics extension and making this change to it:

Docs for gutterIconPath and gutterIconSize available here: https://code.visualstudio.com/docs/extensionAPI/vscode-api#_a-namedecorationrenderoptionsaspan-classcodeitem-id279decorationrenderoptionsspan

Worth doing some investigation into.

[glebec]

So what we'd want to do is add a setting to VSC to display gutter marks for lines with errors or warnings, so we don't rely on extensions (e.g. ESLint) to implement this behavior individually – yes? The plumbing is there, in theory creating a new setting for it would be not too bad. There would be some built-in images for the marks. As a further goal, themes could optionally provide additional ones, though that's lower priority.

[Ikarium]

Additional lint style also, dotted lines, box around the strings etc., ability to change colour/background colour.
For the moment we have error and warning, maybe add some other: Info, spellchecks?

[aeschli]

Warning and info squigglies and borders now use separate color ids:
editorWarning.foreground, editorWarning.border,
editorInfo.foreground, editorInfo.border
That means you can now customize these colors in the user settings or in a theme.

I haven't changed the default colors yet: warning and info are still green. Any color recommendations from the UX team. @stevencl ?

[lukewhitehouse]

Hey @aeschli ! Is there an ETA on when these options will be available in the live app? I'm very keen to start using them like many others :)

[aeschli]

editorWarning.foreground, editorWarning.border,
editorInfo.foreground, editorInfo.border are all in the latest stable release (1.17)

[taka4sato]

Hi @aeschli , thank you very much for the support, I really love this feature.
Can I confirm is there any way to highlight (apply different color) just only for eslint errors/warnings?

I think setting editorError.foreground: will also override the normal syntax errore which cause build fails.

[aeschli]

@taka4sato Sorry, the squiggly coloring is based on the problem's severity (Error, Warning, Info) and there's currently no way of having different colors per problem type.

[mrpbennett]

are we any closer to having the ability to change squiggly lines for dots in the gutter? Or does the above enable us to do that, or is just the ability to change colour?

[avondohren]

Any update to this topic? I love the ability to update the squiggly color, but having a glyph or marking in the gutter would really help visually see that an action is needed on that line.

Thanks in advance! Loving VS Code so far!

[tannerlinsley]

This is still a huge item for me :)

[serhiipalash]

VS Code / SublimeText

Compare how no-inline-styles rule warning looks in Sublime and VS Code and check how minimaps differ.

I think this is the biggest lack in VS Code. :(

[linhtto]

Referencing #3915 which is also open.

[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

[tannerlinsley]

This is genius. I was just complaining about this again today.

…

On Nov 9 2018, at 8:37 pm, Ian Izaguirre ***@***.***> wrote: 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 (https://www.izaguir.re/how-to-make-vscode-error-highlighting-look-more-like-sublime-error-highlighting/) — You are receiving this because you commented. Reply to this email directly, view it on GitHub (#9209 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/AFUmCXnA6AH-4G3SiZHI9onVFVekoENgks5utkoGgaJpZM4JLZo1).

[ianizaguirre]

@tannerlinsley Thanks! I literally have spent weeks searching trying to figure this out because I found it so annoying that I had to squint to find errors lol Glad it could help you.

[PinkaminaDianePie]

created extension for gutters, it's easier than to wait for another 2 years: https://marketplace.visualstudio.com/items?itemName=IgorSbitnev.error-gutters&fbclid=IwAR3jyNd4wbZUz8m36wMRlxUwcpGFCqcbadhEQpuZsyKzbqIw_UL_HGRnddU

[gold]

thank you! btw, I've mostly switched to vscode from atom. Atom overall ux is better then vscode. But vscode performance is significantly better. and the vscode built-in terminal is amazing. (I'm a Linux user btw)

…

On Fri, Dec 7, 2018, 14:18 Igor ***@***.*** wrote: created extension for gutters, it's easier than to wait for another 2 years: https://marketplace.visualstudio.com/items?itemName=IgorSbitnev.error-gutters&fbclid=IwAR3jyNd4wbZUz8m36wMRlxUwcpGFCqcbadhEQpuZsyKzbqIw_UL_HGRnddU — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#9209 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMNA-1gqPBPYCTsKNixbeVeWIQgVqMxks5u2r8OgaJpZM4JLZo1> .

[trusktr]

This is such a crucial feature. Coming from other editors, it is just straight difficult to spot errors while scrolling. Looking at the error ticks in the scroll bar and trying to match the little line with the marks is not so convenient either.

This is the first major feature I miss, coming from Atom. Besides that, I really like VS Code.

[onehorsetown]

@trusktr

Try this: https://marketplace.visualstudio.com/items?itemName=IgorSbitnev.error-gutters

[agentlogic]

In addition to the above extension, I found this pretty useful: Error Lens