VSCode - gray out unused imports

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

enter image description here

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:

enter image description here


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
}