Change squiggly line color under warnings in VSCode

Question

After installing ESLint in VSCode, I'm receiving some warnings like:

'variable' is assigned a value but never used

The underline color is red, but how do I change that color? I have tried:

"workbench.colorCustomizations": {
    "editorWarning.foreground": "#00FF00",
    "editorError.foreground": "#00FF00",
    "editorWarning.border": "#00FF00",
    "editorError.border": "#00FF00"
}

but they change the color of the underlined border, which is not the squiggly one as shown here:

How do I change that red color into #00FF00 instead?

Possible duplicate of [VS Code: Change color of squiggly underline for Lint](https://stackoverflow.com/questions/45578802/vs-code-change-color-of-squiggly-underline-for-lint) — Josh Lee, Sep 19 '19 at 19:09

score 33 · Answer 1 · answered Jul 20 '21 at 14:07

33

The answers here talk about changing the color for all kind of errors (not just from the eslint).

I'm not sure this is what intended (at least I didn't want it to behave like that).
I wanted to show all JS errors in red but all ESLint errors in orange (as warnings).

The way to do it is by editing eslint.rules.customizations at the settings:

  "eslint.rules.customizations": [
    { "rule": "*", "severity": "warn" },
  ]

See more info at the ESLint plugin homepage

answered Jul 20 '21 at 14:07

jurl

2,504
1
17
20

2

Excellent! This was the best answer for me... have an upvote! – ProxyTech Aug 25 '21 at 17:12
Rules that are turned off in the eslint config are not turned into warnings or errors. The customization only applies to lint rules already detected as 'warn' or 'error', which is exactly what you'd want. – Bart Verkoeijen May 18 '22 at 03:33
'Combining both @jurl and Rob's answers here for a complete solution { "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }], "workbench.colorCustomizations": { "editorWarning.foreground": "#00FF00" } } – devaaron Mar 11 '23 at 21:27

Rob Lourens · Accepted Answer · 2017-08-26T20:20:38.383

22

You probably want to customize your eslint config to set these as warnings instead of errors. But if you want to change the color of all error squigglies in the app, this works for me:

"workbench.colorCustomizations": {
    "editorError.foreground": "#00ff00"
}

edited Aug 26 '17 at 20:20

answered Aug 26 '17 at 19:46

Rob Lourens

15,081
5
76
91

1

What on earth... That's exactly what I wrote and now it works. How weird is that? Maybe it's because my HEX colors were capitalized... hmmm. – MortenMoulder Aug 26 '17 at 19:54
1

You can also do eg `"editorError.background": "#ff0000"` to make them really jump out! I kept missing the sqiggly lines with my ageing eyesight! ;-) – Murrah Sep 14 '21 at 23:52

score 13 · Answer 3 · edited Sep 19 '19 at 19:09

13

VSCode v1.17 added the ability to set the color of warnings ("squiggles") and info:

Modify warning and info squiggles.

"workbench.colorCustomizations": {
  "editorWarning.foreground": "#ff0",
  "editorInfo.foreground": "#00f"
}

[This answer Also added to squiggles for TSLint]

edited Sep 19 '19 at 19:09

Woodchuck

3,869
2
39
70

answered Oct 06 '17 at 02:51

Mark

143,421
24
428
436

taha mosaad · Answer 4 · 2020-08-20T03:30:15.690

0

For me after many try to change "workbench.colorCustomizations" from VSC settings but not satisified result . I found out that TsLint Extention i use is (deprecated) and their is another one from microsoft not egamma

but after i install this one every thing back to normal

edited Aug 20 '20 at 03:30

answered Jul 19 '20 at 10:25

taha mosaad

567
5
13

Change squiggly line color under warnings in VSCode

4 Answers4