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.

score 9 · Answer 1 · answered Apr 27 '20 at 17:59

9

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
}

answered Apr 27 '20 at 17:59

Darko Maksimovic

1,155
12
14

Matt Bierner · Answer 2 · 2018-10-31T20:33:10.460

6

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:

edited Oct 31 '18 at 20:33

answered May 17 '18 at 23:13

Matt Bierner

58,117
21
175
206

Cool. Just received update 1.24.1. and it finally works! – eXavier Jun 15 '18 at 08:41
Is this functionality available to Language extensions? I would really love to see this implemented into the D Language extension, but I can't find any related symbols in the API for it. – Jacob Birkett Aug 23 '18 at 04:53
Yes, see `DiagnosticTag.Unnecessary`. This will grey out the diagnostic's span – Matt Bierner Aug 23 '18 at 08:47
"editor.showUnused" is enabled, but not all unused imports are faded out. VSCode 1.40.2, TypeScript 3.6.3 – Feofilakt Jan 14 '20 at 06:06
They're grayed out in `javascript` files, but by some reason not listed in problems as warnings or anything :\ So it's easy to miss them out – Jerry Green Nov 29 '20 at 18:20

score 1 · Answer 3 · answered Feb 19 '19 at 18:08

1

Don't forget to select language mode.

answered Feb 19 '19 at 18:08

EssamSoft

716
6
13

score 0 · Accepted Answer · answered Mar 13 '18 at 14:23

0

I think you need to wait for some time since they have a plan to release this soon.

Checkout this link Suggestion: Show unused imports in VS Code Editor as grayed #8165

answered Mar 13 '18 at 14:23

Sajeetharan

216,225
63
350
396

@eXavier The issue is now fixed. You can see how to use it in [Matt Bierener's answer below](https://stackoverflow.com/a/50401703/2188407) – Justin Lessard May 25 '18 at 17:52

score 0 · Answer 5 · answered Mar 13 '18 at 14:48

0

Update tslint.json file in project folder with the correct rule:

{
  "rules": {
    "no-unused-variable": true,
    .........
    .........
  }
}

Also verify in vscode that:

"typescript.autoImportSuggestions.enabled": true

Unused imports will be reported as warnings. More information in tslint documentation.

answered Mar 13 '18 at 14:48

4ndt3s

3,238
2
20
30

Tried that. Now I can see `Warning: The 'no-unused-variable' rule requires type information.` in the output. I found there are few issues with all that in ts-lint 5. I cannot use the workaround in tsconfig as it produces too many errors during production build (most of them are from 3rd party components) – eXavier Mar 13 '18 at 15:15
Yes, this rule requires type information, but works. – 4ndt3s Mar 13 '18 at 15:21

VSCode - gray out unused imports

5 Answers5