search

vuejs / vetur

Vue tooling for VS Code.
https://vuejs.github.io/vetur/
MIT License
5.75k stars 593 forks source link

Imports to Components were inserted to random positions. #2501

Open infinnie opened 3 years ago

infinnie commented 3 years ago

Info

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.

component

Reproducible Case

yoyo930021 commented 3 years ago

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

MrSiby commented 3 years ago

I am also having this issue. Also maybe https://github.com/vuejs/vetur/issues/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 https://github.com/vuejs/vetur/issues/2633#issuecomment-757603397 so not sure how many things it affects, however it does solve the issue.

Autocomplete appearing

Screen Shot 2021-03-04 at 15 43 55

Importing forevermore

Screen Shot 2021-03-04 at 15 44 14

Additions to the view component

Screen Shot 2021-03-04 at 15 44 33
jasonlyu123 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 Githubissues.
  4. Githubissues is a development platform for aggregating issues.