Feature Request - Show unused imports TypeScript

[superheri]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Win 10 1809
• Vetur version: 0.14.5
• VS Code version: 1.31.0-insider

Problem

Unused imports are not shown in Vue Files like it is in VS Code TypeScrfipt files. Would be nice to have this to know which imports are not used and can be removed.

In a TS file :

In a Vue file :

Even if I never used lodash in my code the import is still shown the same color as other imports unlike in TS files.

Reproducible Case

Add whatever imports in a Vue files and don't use them.

[adamalfredsson]

I am looking for the same feature! Would help a lot!

[TimeBandit]

This would help our team too.

[essenmitsosse]

Have you tried adding "noUnusedLocals": true to compilerOptions in your tsconfig? This way the typescript complier handles unused variables (instead of just VS Code). For me this gives me a warning about unused variables and imports, even in .vue files.

[octref]

Depends on #682. We are using TS 2.8 still and it doesn't have this feature yet.

[octref]

Blocked by microsoft/language-server-protocol#500.

[octref]

Will be available in next version.

For <script>, you need to set checkJs to true is jsconfig/tsconfig, though.

[superheri]

@octref Do we need checkJs even if we use tsconfig with <script lang="ts">?

[octref]

No, lang="ts" works OOTB because the script type is typescript, so no check "js".

[superheri]

Ok. Thanks a lot for this new feature!

[mengdi]

@octref It doesn't seem to work in v0.18.0 with <script lang="ts">.
@superheri Did you try this ?

[octref]

[superheri]

Does not work on my side too. I don't understand why...

[octref]

@mengdi @superheri Can you use either https://github.com/octref/veturpack or vue-cli to create a minimal reproducible example?

[superheri]

In my big project at work with ~1250 files of JS/TS/Vue it can't seem to work. But in veturpack it seems to work though. I found a way to produce a bug with veturpack by changing the file client/views/Home.vue with this :

<template>
  <div class="page">
    <counter></counter>
  </div>
</template>

<script lang="ts">
import Counter from 'components/Counter'
import * as _ from 'lodash';
export default {
  components: {
    Counter
  }
}
</script>

As we can see in this image (You can use it at the same time as a proof I use Vetur 0.18.0) :

In this case even if we are not using the declared _ we still don't see the not used message.

I will try hard to reproduce more cases. I'll keep you updated with this.

EDIT : I just realized Counter.vue while adding lang="ts" reproduces it exactly.

[octref]

Hmm, I just realized that this works:

"vetur.useWorkspaceDependencies": true with Veturpack loading TS 2.9.2.

When using bundled TS 3.3 this breaks.

[octref]

I see the problem. lang="ts" is not recognized as TS file...If you add checkJS: true to tsconfig/jsconfig this works.

[octref]

We are looking at two issues here:

• lang="ts" not recognized as TS file #1186, which I just fixed.
• No reporting unused import on import * as _ from 'lodash' microsoft/TypeScript#30760. If you change the import of lodash from _ to anything else, Vetur/TSC would start reporting errors. I think the original "feature" was to help people who want to use lodash in a browser (so they could write _.sort etc without require/import any lodash code).

[superheri]

After testing and trying a way to reproduce the bug I have with my big project, I can't find a way to reproduce it on a minimalist case. Maybe it is a mix of multiple fonctionnalities that creates this bug. Or because it is so slow on big projects that Vetur become unstable.

[TimeBandit]

This issues is not resolved for us. We are using "typescript": "^3.3.4000" and <script lang="ts"> the unused imports in our Vue files are now underlined with red.

[octref]

Please create a repro case and open new issues.

[douglasg14b]

Yeah, this feature doesn't work....

What is the actual resolution here? A reproduction case is literally any project with any .vue file that uses typecript. At least in my experience thus far.

[superheri]

I can confirm this problems still happens to me. I haven't used Vetur in about a year, but when I got back to it some weeks ago, the problem was there... Seems like a regression at some point. Would be great if it could be fixed...

[undergroundwires]

Still does not work in 2021 😢

[LinusBorg]

And it likely won't for you in 2022 if people continue to ignore requests by the maintainer for a reproduction.

It seems to work in most cases - works for me, for example. That's also why the issue is closed.

It seems, from what you folks indicate, to break under certain condition - conditions that you, the ones experiencing the problem, have to enable the maintainer to understand and reproduce.

So coming here and posting sad smiley will not help us fix this.

[LinusBorg]

the default tsconfig in vue-cli projects isn't set up to report unused locals. just set it to do so (typescript docs will help you with that).

still not a bug.

[undergroundwires]

So the expected behavior is that it does not work without configuring noUnusedLocals 🤔. Apparently I have wrongly assumed that it was designed to lint visually regardless of the setting. In my opinion it would be better to not depend on the tsconfig and lint anyway. In the end it's not a bug then, thanks for clearing this out.

[LinusBorg]

You can use eslint for that too

[undergroundwires]

In my case ESLint without noUnusedLocals does not work on ts in .Vue files but works in .ts files. Repro: vue create hello-world

[yoyo930021]

Please open a new issue and provide a repro case next time.

I slove this problem in next version, because I just understand this problem.