VSCode - gray out unused imports

Question

Is it possible to configure VSCode so that it displays unused import as grayed? I have VSCode 1.21.0, using Typescript 2.7.2

I found and tried several setups but none worked for me. Based on this link it should have been possible since version 1.19.0

I tried setting tsconfig as described here but the only effect was lots of error during compilation.

It seems to be so basic requirement that I would even consider it as default setting. It is definitely possible in other editors (e.g. WebStorm). I love VSCode but I'm really missing this feature.

Answer 1

For me the problem was that I had turned off javascript.validate.enable, so even though the editor.showUnused was set to true, it didn't work. So the fix for me was to have both:

{
  "javascript.validate.enable": true,
  "editor.showUnused": true
}

Answer 2

This feature was added for JavaScript and TypeScript with VS Code 1.24

VS Code ships with built-in support for fading out unused locals/parameters/imports in JavaScript and TypeScript. You can enable/disable this feature by setting:

// For all languages (it is enabled the default)
"editor.showUnused": true

// Or just for a specific language
"[typescript]": {
   "editor.showUnused": true
}

Extensions can also add support for other languages.

You can additionally mark unused variables as warnings by setting noUnusedLocals and/or noUnusedParameters in your jsconfig or tsconfig:

{
  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "exclude": [
    "node_modules",
    "**/node_modules"
  ]
}

This adds a squiggly and error for unused variables in addition to graying them out: