VS Code: Change color of squiggly underline for Lint

Question

My configurations currently show the same red squiggly line for Typescript errors and TSLint warnings.

I am using TSLint extension for Visual Studio Code but the configuration I believe is a general VS Code configuration.

This is what it should look like:

I found this feature request to take it further than just Squiggly lines.

It's not a duplicate of "How to change error styles in VS Code" because I need to change the color of Lint's warnings only. NOT every error.

You can't change it for **Lint** only. All errors and warnings have the same style. — Alex, Aug 08 '17 at 23:30

score 31 · Accepted Answer · answered Aug 13 '17 at 17:05

31

There is a setting to have the tslint extension return warnings (green) instead of errors (red): "tslint.alwaysShowRuleFailuresAsWarnings": true

Also, you can change your tslint config to determine which issues are errors, and which are warnings.

answered Aug 13 '17 at 17:05

Rob Lourens

15,081
5
76
91

1

Lint configurations has the option: "defaultSeverity": "warning". But the configuration you mentioned did the trick :D – Esteban Santini Aug 14 '17 at 05:57
Ok, I'm not sure if there's something else you're supposed to set on the tslint config to get it to produce warnings instead. But if tslint is actually producing warnings and vscode shows them as errors, that would be a bug on the tslint extension. – Rob Lourens Aug 14 '17 at 20:25
1

If you're interested here's my tslint.json and the VS settings are pretty much the default ones. https://github.com/esantini/React_Example/blob/master/tslint.json – Esteban Santini Aug 15 '17 at 18:09
THANKKKKKK YOU! Needed this so bad! – Juan Herrera Oct 25 '17 at 20:39
1

For anyone looking for eslint version that should be: `"eslint.rules.customizations": [ { "rule": "*", "severity": "warn" } ] }` (https://github.com/Microsoft/vscode-eslint#settings-options). Thank You for the answer anyway. – kcpr Sep 02 '22 at 01:31

score 19 · Answer 2 · edited Sep 19 '19 at 19:06

19

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"
}

edited Sep 19 '19 at 19:06

Woodchuck

3,869
2
39
70

answered Oct 06 '17 at 02:46

Mark

143,421
24
428
436

Well, it won't change styling for **Lint only**. It will change it for all warnings. – Alex Oct 06 '17 at 02:51
1

Yes. A little confusing as to what exactly the OP wanted: "I need to change the color of Lint's warnings only. NOT every error." So all warnings might be fair game. – Mark Oct 06 '17 at 03:09
I only have TypeScript errors and Lint warnings, so all warnings would be fair game. Can't test your solution at the moment but thank you for the contribution :) – Esteban Santini Oct 06 '17 at 21:39
2

Brilliant - this is very handy to know. Have it set with semi transparent so not as distractiong – Drenai Jun 09 '18 at 19:30
1

It would be really nice to differentiate by color the different source of errors (eg. ESLint vs. TSLint, etc.) – Gerson Goulart Jan 28 '20 at 19:27

Rafe · Answer 3 · 2019-10-23T21:16:02.410

5

For eslint I was able to just set specific rules to warning, which I think is a better way to do it rather than trying to set all to one level. The unused vars was the one that really annoyed me, so:

in the .eslintrc file...

{
    "rules" : {
    "no-unused-vars": "warn"
}

edited Oct 23 '19 at 21:16

answered Oct 15 '18 at 20:44

Rafe

1,937
22
31

1

I was looking for this. I wish the OP indicated TSLint in the question. I had to add warn to multiple rules to get my "Colors for ESLint only", because marking as errors while I'm coding is just annoying. I do wish somebody had a solution that did the same as the TSLint "defaultSeverity" though. If somebody finds that it would cover all rules and I'd be golden. – Neil Gaetano Lindberg Oct 22 '19 at 18:31

score 2 · Answer 4 · answered Apr 10 '18 at 05:09

2

This will fix your problem.

Add "defaultSeverity": "warning"in tslint.json.

Reference: Change underline color to avoid confusion with compiler errors

answered Apr 10 '18 at 05:09

Santosh Jadi

1,479
6
29
55

score 2 · Answer 5 · answered Apr 05 '22 at 05:10

2

For the ESLint plugin:

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

Setting was found in the GitHub PR.

answered Apr 05 '22 at 05:10

Codebling

10,764
2
38
66

Also described at the [plugin page](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) – jurl May 03 '22 at 06:43

score 0 · Answer 6 · answered Jun 02 '23 at 07:14

0

as i was reading through https://github.com/eslint/eslint/discussions/15866 I realized my problem was realated to prettier. \

just adjust .eslintrc.js file:

  rules: {
    'prettier/prettier': 'warn',
  },

and red underscore becomes yellow underscore

answered Jun 02 '23 at 07:14

wojtek

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 02 '23 at 08:49

VS Code: Change color of squiggly underline for Lint

6 Answers6

Linked