How can I show unused imports/locals in green (warning) in vscode, rather than red (error)?

Question

When I'm writing TypeScript code in vscode, unused imports are shown as an error, with a red squiggly underline:

The same is true of unused local variables. I'm happy to have these marked as errors when I run tsc as part of my continuous integration tests, but I'd rather have them rendered as green warnings in vscode. It's more likely that I just haven't used the import/local yet, and the red error makes me think there's a more serious problem, e.g. that I'm importing a symbol that doesn't exist.

Back when unused imports/locals were implemented by tslint, this worked great. But now that they're part of the compiler, it's harder to distinguish them.

Is it possible to make just these two compiler errors get rendered as warnings?

My tsconfig.json includes:

{
  "compilerOptions": {
    "noUnusedLocals": true
  }
}

Answer 1

TL;DR: Upgrade to 1.19.0+ (currently only available as insiders build version) and it does report these errors as warning by default.

---

You are lucky! Recently they merged a pull reqests (https://github.com/Microsoft/vscode/pull/37616) which allows users to change the style of reported tsc errors. It is available for VSCode 1.19.0+. As of now it is only available in the VSCode insiders build (which is basically the beta version of the upcoming VSCode).

The setting is called typescript.reportStyleChecksAsWarnings. If the setting is set to true, then all errors of the below types will be reported as warning:

--noUnusedLocals
--noUnusedParameters
--noImplicitReturns
--noFallthroughCasesInSwitch
--allowUnusedLabels
--allowUnreachableCode

In order to enable this setting go to File -> Preferences -> Settings and filter for typescript.reportStyleChecksAsWarnings. Here you can change this setting to true (which is the default in the current insiders build).