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

Offer code mark styles and gutter marks #9209

Open
dbaeumer opened this issue Jul 13, 2016 · 49 comments
Open

Offer code mark styles and gutter marks #9209

dbaeumer opened this issue Jul 13, 2016 · 49 comments
Labels
feature-request Request for new features or functionality ux User experience issues
Milestone

Comments

@dbaeumer
Copy link
Member

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)
2016-07-11_020259

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)
2016-07-11_020203
(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
Copy link
Member Author

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

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

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

@dbaeumer
Copy link
Member Author

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

@weinand weinand added the feature-request Request for new features or functionality label Jul 13, 2016
@bpasero
Copy link
Member

bpasero commented Jul 13, 2016

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

@darkred
Copy link

darkred commented Jul 13, 2016

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

glebec commented Jul 13, 2016

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

egamma commented Jul 14, 2016

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

@alexdima alexdima added the ux User experience issues label Jul 14, 2016
@alexdima alexdima added this to the Backlog milestone Jul 14, 2016
@stevencl
Copy link
Member

I believe VS uses a more vibrant green:

image

@dbaeumer
Copy link
Member Author

dbaeumer commented Aug 4, 2016

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

stevencl commented Aug 4, 2016

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

glebec commented Aug 4, 2016

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

(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).

capture

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

@bgashler1 bgashler1 self-assigned this Aug 5, 2016
@bgashler1
Copy link
Contributor

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

coreh commented Aug 5, 2016

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

gold commented Sep 30, 2016

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

DavidBabel commented Oct 24, 2016

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
capture d ecran 2016-10-24 a 15 47 48

Each time an error occurs, the text become red.

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

@javiayala
Copy link

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

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

capture d ecran 2016-11-04 a 10 34 46

Don't know if it can be used elsewhere

@donaldpipowitch
Copy link
Contributor

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

karbon0x commented Apr 6, 2017

Any update on this?

@glebec
Copy link

glebec commented Jun 21, 2017

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

DHedgecock commented Jun 21, 2017

Actually it looks like it's also possible to have gutter icons now:
screen shot 2017-06-21 at 3 57 06 pm

^ that screenshot is from pulling down the codemetrics extension and making this change to it:
screen shot 2017-06-21 at 3 54 59 pm

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

glebec commented Jun 22, 2017

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

Ikarium commented Jun 23, 2017

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

aeschli commented Sep 25, 2017

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

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

aeschli commented Oct 11, 2017

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

@taka4sato
Copy link

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

aeschli commented Nov 24, 2017

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

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

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

This is still a huge item for me :)

@serhiipalash
Copy link

VS Code / SublimeText

screen shot 2018-03-18 at 12 03 10 pm

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

linhtto commented Aug 27, 2018

Referencing #3915 which is also open.

@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

@tannerlinsley
Copy link

tannerlinsley commented Nov 10, 2018 via email

@ianizaguirre
Copy link

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

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

gold commented Dec 8, 2018 via email

@trusktr
Copy link

trusktr commented Jun 24, 2019

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

@bpasero bpasero changed the title [feature request] Offer code mark styles and gutter marks Offer code mark styles and gutter marks Oct 10, 2019
@agentlogic
Copy link

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

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

No branches or pull requests