'VS Code: Change color of squiggly underline for Lint

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:

Image of 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.



Solution 1:[1]

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.

Solution 2:[2]

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

Solution 3:[3]

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

Solution 4:[4]

This will fix your problem.

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

Reference: Change underline color to avoid confusion with compiler errors

Solution 5:[5]

For the ESLint plugin:

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

Setting was found in the GitHub PR.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rob Lourens
Solution 2 Woodchuck
Solution 3
Solution 4 Santosh Jadi
Solution 5 Codebling