Vscode: Highlight unused symbols

[mindplay-dk]

I'd like to request an improvement to Typescript support: highlighting of unused symbols.

Refactoring and moving things around between files often leads to a lot of manual analysis, for example to find imports that are no longer in use.

This doesn't need to be a big, complex feature - I don't expect this to trawl through the entire codebase and figure out what is or isn't in use.

I'd be happy with just file-local highlighting - e.g. gray out variable and constant declarations if they aren't exported or used in any expression or statement anywhere in the file.

[mindplay-dk]

If possible, in addition, a right-click option to clean up unused symbols would be useful :-)

[waderyan]

Thank you for your feature request! We have discussed this internally and have considered adding it soon.

[jschlieber]

Webstorm has it and it is really really handy! Would love to have it in VSCode for TypeScript and JavaScript.

[mjbvz]

Related API request #20219

[mjbvz]

23805 Notes that we could also investigating graying out unreachable code

[PDS42]

Sorry if that's not the right place to ask this, but is this being implemented anytime soon (local unused variables)? It would be a huge improvement IMO. This is the only reason that makes me consider switching to WebStorm, though I really enjoy VS!

[mindplay-dk]

Storm is generally awful at Typescript, but yes, I occasionally find myself opening Storm just to check for unused symbols. Would be great to have this.

[cute-angelia]

today one unused variables make me error, i hope vs can support it

[justnewbee]

i'm reading through this issue for i want this too, please make it happen.
and also, highlighting exports that are not referenced anywhere in the project would be much better

[WeiGrand]

I think i could get rid of Storm with this feature~

[demisx]

Would love this feature as well. A major hiccup in refactoring that forces me to switch to WebStorm to run these checks. I'd rather stay in VS Code the entire time. Please, please, make this happen.

[adrienharnay]

I am also using Webstorm just for this feature. Would make switching a breeze! Thanks for the work put into VSCode

[Ccz-Chen]

Two of our projects in JavaScript. I am interested in the feature. Thanks,

[kubante]

+1

[sshmyg]

👍

[janakact]

+1

[PDS42]

If you guys could just use thumbs up emojis instead of flooding issues with +1, my inbox and I
would be super grateful.

[jcezarms]

Would like to add my support to this feature. To some developers, it is not particularly a personal preference, but a requirement coming from the enterprise Quality Gates, that may detect and reject code containing unused variables (my current scenario).

[gharibi]

I will surely get rid of WebStorm as soon as this gets implemented!

[vlodko]

@here to everyone who is using VS Code for TypeScript development.
Put this two properties totsconfig.json in compilerOptions section:

{
  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true,
....

It will highlight the variable or class member with green curly line (at least it looks like that with my color theme):

Also in Problems panel you will see a warning:

Read more about compiler options here

[erezLieberman]

+1

[dominique-mueller]

Hey to all, look what I've found a few days ago: This _awesome_ extension not only allows to remove unused imports, but - following my feature request - now also highlights them: TypeScript / JavaScript Deporter.

The visuals could use some improvements, but overall it it works like a charm in my projects!

[dominique-mueller]

Also: https://twitter.com/mattbierner/status/976548673457856512?s=19

[mjbvz]

Depends on https://github.com/Microsoft/TypeScript/pull/22361

As already noted, you can already enable this using settings in your jsconfig / tsconfig. This issue specifically is now tracking:

• Allowing this you to see unused symbols even when you don't have a jsconfig or tsconfig and have not configured these settings

• Possibly presenting unused symbols in a different way. Graying out these symbols is one idea

[andy-ms]

There's now a ... under unused symbols. Graying out might be a good idea though.
@mjbvz I notice that some unused diagnostics are red and others are green. (This is with --noUnusedLocals enabled, so they're errors and not suggestions.) The diagnostics should all have reportsUnnecessary, so if you are still matching against a list of error codes, I would change to using that property instead.

[Zx-EvM]

Is this works only for JavaScript and TypeScript?

[andy-ms]

@Zx-EvM Just JS/TS, maybe you should open an issue with a language plugin that you think should support this too. But it would be a lot of work if that language doesn't support unused variables yet; for this issue TypeScript already supported detecting unused variables and all we had to do was send that info to the editor.