vscode can't "go to definition" for auto imported vue components

[julie777]

If discussions were enabled for this project I would have started one instead of creating an issue.

I love unplugin-vue-components. Given the regularity of directory structure, file naming and auto naming of the components it makes sense just to infer the imports and make them implicit. However, I realized that I often "jump to definition" in vscode. Apparently vscode was doing that based on import statements and doesn't work without them.

I am hoping that someone who knows how vscode works can provide a solution for this that can be added to unplugin-vue-components.

[antfu]

For me, with Volar it works. Can you share more info about what you are using?

[julie777]

I am using vscode with extensions for volar, prettier and eslint. I am using quasar to create my project and MyComponent is in the src/components directory. Autoimport works great. My project compiles and runs.

Right click on MyComponent in index.html (a page) with vscode and choose "Go to definition". It does nothing.

Here is the code.

<template>
    <h1>this is my component</h1>
</template>
<script setup>
</script>

and the component using it

<template>
  <q-page class="flex flex-center">
    <MyComponent />
  </q-page>
</template>
<script setup>
</script>

[antfu]

Have you enabled dts: true?

[julie777]

dts: true

I am not familiar with that setting. Can you point me in the right direction?

(I just know that go to def worked before I deleted all the import statements from my vue components.)

[julie777]

Have you enabled dts: true?

When I enabled dts:true then go-to-definition in vscode opens the components.d.ts file instead of going to the component file.

Also, when components.d.ts is opened eslint gives an error for the file "missing semicolon"

[acidjazz]

here is detailed replication

[lilu1814]

you can try vue-helper plugin in vscode

[richex-cn]

@antfu I have a similar problem, And I created an example using vite: https://github.com/richex-cn/issue-unplugin-vue-components-vscode

Component type cannot be inferred correctly in vscode:

I tried to clone Vitesse and use vscode locally. It can work normally. What did I miss?

[sondh0127]

@antfu I have a similar problem, And I created an example using vite: richex-cn/issue-unplugin-vue-components-vscode

Component type cannot be inferred correctly in vscode:

I tried to clone Vitesse and use vscode locally. It can work normally. What did I miss?

add shamefully-hoist=true then reinstall will help

[richex-cn]

@sondh0127 Great! It work now, I'm noticed this configuration is also available in Vitesse. Thank you!

But this is highly discouraged in pnpm, I wonder if there is a better way to deal with it……

[sondh0127]

I'm not sure about this way is better or not. But we can re-add @vue/runtime-core to devDependencies, which to tell pnpm put it at first level of node_modules then the import above will match

[sondh0127]

I'm also notice that my current Volar version can detect with the old way of declare `https://github.com/antfu/unplugin-vue-components/pull/344/files

[richex-cn]

After re-add @vue/runtime-core to devDependencies, it work normally. One reason I can think of not recommending is that this will lead to hidden dangers when maintaining Vue versions in the project, Developers may need to pay attention to two dependent versions at any time.

As I tried to understand the reason, I had some confusion:

In Volar, The GlobalComponents define from vue, see here: https://github.com/johnsoncodehk/volar/blob/de487c165ebec13b4e345f6a582ddd99c0c9a8b4/packages/vue-typescript/src/utils/localTypes.ts#L51-L52

But why does the document say @vue/runtime-core ? ses here: https://github.com/johnsoncodehk/volar/blob/de487c165ebec13b4e345f6a582ddd99c0c9a8b4/extensions/vscode-vue-language-features/README.md?plain=1#L91-L95

It seems that this is why defining GlobalComponents to 'vue' works normally.

How should I understand it ? @johnsoncodehk @sondh0127 Thanks.

Some related: https://github.com/antfu/unplugin-vue-components/issues/343 https://github.com/antfu/unplugin-vue-components/issues/355#issuecomment-1098939308

[antfu]

https://github.com/antfu/vscode-goto-alias should solve this.