Imports to Components were inserted to random positions.

[infinnie]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: Windows
• Vetur version: 0.30.3
• VS Code version: 1.51.1

Problem

When editing the template of a component with help from IntelliSense auto completion and typing the component name as a tag name, even if already declared, a new import is still generated, its contents being inserted to random positions in the script part of the Vue code.

Reproducible Case

[yoyo930021]

Please provide a repro project
https://github.com/vuejs/vetur/blob/master/.github/NO_REPRO_CASE.md

[MrSiby]

I am also having this issue. Also maybe #2633 is related.

When I create a component to use in my view, auto-complete pops up when I begin typing in the component tag in my template and always auto-imports regardless if I have imported it or not. Sometimes somewhere random in my script, thus breaking it.

No matter of how many imports there are, auto-complete will offer a choice and it will always be to import the component.

Perhaps it's something with my settings? Or VSCode even? I'm not sure and would like to know if anyone has encountered the same. But the workaround I've found is to turn this setting off vetur.completion.autoImport.

I have only just found the workaround here #2633 (comment) so not sure how many things it affects, however it does solve the issue.

Autocomplete appearing

Importing forevermore

Additions to the view component

[jasonlyu123]

@MrSiby I guess you didn't set up path aliases for typescript, as the comment suggested. So typescript, which powers the js/ts language features, is not aware that these import paths are the same.

[MrSiby]

@jasonlyu123 I've set up the typescript config and after changing all of the kebab-case references to pascal case the auto complete works better and does not import the component infinitely.

However it doesn't auto import at all, but I'm assuming it's to do with some other part of my configs. I'm still learning how to build SPAs with vue 3 and referencing multiple learning sources, all with different experience levels so my set up is a bit messy anyway.

Thank you for the link and pointing me in the right direction. It has helped my learning.

[gburning]

This happens for me as well. The project I'm writing in doesn't use typescript either.

A few strange things happen:

1. Auto-completing an already imported component causes it to add a duplicate import (this is the most frustrating part honestly).
2. The inserted import statement and the component definition don't respect the correct indentation (in this project everything inside <script> tags is indented 2 spaces minimum).
3. Component definition is inserted randomly somewhere inside the <script>.
4. No comma is added after the previous component definition.

[stefvw93]

Any update on this? This bug is absolutely detrimental to developer experience and is still here in 0.35.0.

Sidenote, to me the "no repro case" label seems kind of dubious as this bug happens to me in literally every Vue 2 project where Vetur is active.