error and warning zigzag lines overlap the text

[aditya81070]

Type: Bug

In any javascript project, enable eslint extension so it highlights errors and warning. The warnings and errors show zigzag yellow and red lines below the text. These lines are overlapped with text and makes text and warnings difficult to read.

Extension version: 2.4.3 VS Code version: Code 1.88.0 (Universal) (5c3e652f63e798a5ac2f31ffd0d863669328dc4c, 2024-04-03T13:28:18.899Z) OS version: Darwin x64 23.2.0 Modes:

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz (8 x 2000)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|7, 6, 6| |Memory (System)|16.00GB (1.63GB free)| |Process Argv|--crash-reporter-id 4864d9f4-e6d3-4f8e-9986-b64a8e1eb107| |Screen Reader|no| |VM|0%|

A/B Experiments

``` vsliv368cf:30146710 vspor879:30202332 vspor708:30202333 vspor363:30204092 vscod805cf:30301675 binariesv615:30325510 vsaa593cf:30376535 py29gd2263:30899288 c4g48928:30535728 azure-dev_surveyone:30548225 a9j8j154:30646983 962ge761:30959799 pythongtdpath:30769146 welcomedialogc:30910334 pythonidxpt:30866567 pythonnoceb:30805159 asynctok:30898717 pythontestfixt:30902429 pythonregdiag2:30936856 pyreplss1:30897532 pythonmypyd1:30879173 pythoncet0:30885854 h48ei257:31000450 pythontbext0:30879054 accentitlementsc:30995553 dsvsc016:30899300 dsvsc017:30899301 dsvsc018:30899302 cppperfnew:31000557 d34g3935:30971562 fegfb526:30981948 bg6jg535:30979843 ccp1r6:30993540 dsvsc020:30976470 pythonait:31006305 gee8j676:31009558 dsvsc021:30996838 g1icg217:30999571 ```

For more information, added the screenshots below with the default VS code theme and this theme.

I have been using this extension for almost 4 years and have never encountered any issues and this issue just after recent VS code update.

[wesbos]

thats odd. The theme itself doesnt control the size or placement of any of that. Are you sure you dont have a weird line-height setting? What happens if you change the font? Maybe something odd that the italics are causing?

[zakutnya]

Same here:

I've been using the theme for years already and just got this odd thing. Tried to change font / font-size settings, but it doesn't change the appearance of the warning / error curvy line. Also line-height settings are all zeroes, as set by default. Plus there are no editor.tokenColorCustomizations or workbench.colorCustomizations values defined in settings, which could affect the position of the line.

VScode Info: Version: 1.88.0 Commit: 5c3e652f63e798a5ac2f31ffd0d863669328dc4c Date: 2024-04-03T13:28:18.899Z Electron: 28.2.8 ElectronBuildId: 27744544 Chromium: 120.0.6099.291 Node.js: 18.18.2 V8: 12.0.267.19-electron.0 OS: Darwin x64 23.0.0

[cmccormack]

I am also seeing this in Version: 1.88.0 (Universal) It appears to have started after updating to the March release.

Screenshot from Cobalt2 theme:

I ran through several other normal dark and light themes and only one other theme (Night Owl Light) had the same issue:

Something I found interesting is on the high contrast themes, there are two visible horizontal bars below the squiggly, I wonder if they are somehow related to why yours are showing up higher than others.

[zakutnya]

@cmccormack,

I wonder if they are somehow related to why yours are showing up higher than others

Nah, those are just border styles used for high contrast themes, i believe.

Which, by the way, can be used by a temporary workaround for this. As i personally now can't see the errors and i only find those looking at tab name having errors counter and looking at the scrollbar for a reddish square.

Code for copy-paste

"workbench.colorCustomizations": {
  "[Cobalt2]": {
    "editorWarning.foreground": "#00000000",
    "editorWarning.border": "#ffc600",
    "editorError.foreground": "#00000000",
    "editorError.border": "#ff628c"
  }
}

[aditya81070]

thats odd. The theme itself doesnt control the size or placement of any of that. Are you sure you dont have a weird line-height setting? What happens if you change the font? Maybe something odd that the italics are causing?

it is the same even with different fonts. I also reset the line-height as I was using suggested recommendations here

[palashmon]

This issue is also reported after the recent VS Code version: Code 1.88.0 update:

• https://github.com/microsoft/vscode/issues/209614

Please consider giving this VS Code issue a like and leaving a comment there, so that it could be given higher priority for the upcoming release.

Temporary Solution

Use less vibrant color or any other color you may like for the underline:

"workbench.colorCustomizations": {
  "[Cobalt2]": {
    "editorError.foreground": "#ff000088",
    "editorWarning.foreground": "#ffe60033",
    "editorInfo.foreground": "#00ff0088"    
  }
}

Or, disable the zigzag lines and use a background color instead:

```json "workbench.colorCustomizations": { "[Cobalt2]": { "editorError.foreground": "#00000000", "editorError.background": "#ff003333", "editorError.border": "#00000000", "editorWarning.foreground": "#00000000", "editorWarning.background": "#ffff0022", "editorWarning.border": "#00000000", "editorInfo.foreground": "#00000000", "editorInfo.background": "#22EE0022", "editorInfo.border": "#00000000" } } ```

Optional

Use Error Lens vscode extension:

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

[wesbos]

Night owl also reporting double underlines showing up.. Related? https://github.com/sdras/night-owl-vscode-theme/issues/322

[ThomasRoest]

same here, errors are barely visible :(

Cobalt2

Vscode Dark

vscode version: 1.88.1

[wesbos]

small update: MS is aware of the bug and someone is assigned: https://github.com/microsoft/vscode/issues/209614

[wesbos]

this has been fixed but wont hit a reease for a few more weeks. A fix for now:

help → toggle developer tools → console tab and then paste this to apply the fix:

document.body.insertAdjacentHTML('beforeend', `<style>.monaco-editor .view-overlays > div > div, .monaco-editor .margin-view-overlays > div > div { bottom: initial; }</style>`);

You'll have to redo this for each instance of VS Code you open.

[matjaeck]

@wesbos Hey, I wanted to use the opportunity to thank you for the great theme, I've been using it for years. Thanks for documenting the problem here. Let's hope a fix arrives sonn!