Feature request: auto importing components

[sheremet-va]

PhpStorm has a nice feature of auto importing components when typing it's name inside template tag. Is it possible to add such functionality?

Examples:

<script lang="ts">
import { defineComponent } from 'vue'; 

export default defineComponent({
   name: 'Placeholder'
});
</script>

<template>
    <test-c... <-- picking suggestion
</template>

After picking:

<script lang="ts">
import { defineComponent } from 'vue'; 
import TestComponent from '@/components/TestComponent.vue';

export default defineComponent({
   name: 'Placeholder',
   components: {
      TestComponent
  }
});
</script>

<template>
    <test-component>
</template>

Would be great if it also worked with script setup!

But I wonder how it will be handled with default typescript behavior? Because for example, if you store components inside folder like so:

- TestComponent
  - types.ts
  - index.ts
  - TestComponent.vue

and try importing component from index, will it handle it correctly? Because right now importing defineComponent imports it from @vue/runtime-core and not from vue (which actually breaks our Vite application, but it's whole another story). I try not to open issues if Volar's behavior matches default.

[johnsoncodehk]

I personally don't like this feature... It introduces some DX conventions outside TS. And it will increase many component item in completion list for a large project.

As I know Vetur also has this feature, have you used one of them for a while? Does this feature bring substantial DX improvements?

But I wonder how it will be handled with default typescript behavior?

Considering performance, we may only be able to handle auto-import from *.vue files.

[sheremet-va]

I wrote a project using PhpStorm and the main drawback of switching to VSCode was the loss of auto-importing components (and bad initial responsiveness). In fact some of our coworkers stay on Storm because of this.

But I haven't used Vetur with this feature.

[johnsoncodehk]

Thanks for shared! "initial responsiveness" mean language server initialization speed, or first LSP request (like hover info) response speed? Will take a look for improve.

In fact some of our coworkers stay on Storm because of this.

I don't think your coworkers will switch to VSCode when we add this feature. 🤣

Anyway I will try to implement this feature as experiment first.

[sheremet-va]

Thanks for shared! "initial responsiveness" mean language server initialization speed, or first LSP request (like hover info) response speed? Will take a look for improve.

LSP requests can be quite long. I mean hover info, reference window and go to definitions (this ones can be reeeeeealy long). It really throttles if I make edits in multiple files at once (I mean > 10). This workflow happens very rarely tho.

If you need any info from me, I will happily provide it!

[johnsoncodehk]

I want to improve it if possible, will be helpful if you can provide profiling.

[sheremet-va]

I started debugging, and I so far I can say I see a lot of these errors:

By the way maybe we should discuss this in another thread? Where should we switch?

[johnsoncodehk]

@sheremet-va Sorry for missing the message!

You can open a new Issue / Discussion or ask on Discord anyway is ok.

Please post how and where to get this error.

[johnsoncodehk]

Supported in v0.25.15 v0.25.16.