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:

• Squiggly lines have moved slightly upwards after the update microsoft/vscode#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:

"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? sdras/night-owl-vscode-theme#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: microsoft/vscode#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!