language-tools
language-tools copied to clipboard
vuejs
Bug: Auto import from vue adds separate import statements in .vue files
Vue - Official extension or vue-tsc version
2.1.2
VSCode version
1.92.2
Vue version
3.4.38
TypeScript version
5.5.4
System Info
No response
Steps to reproduce
This happens only in .vue files, works ok in .js files.
Every time I use auto import from 'vue', the symbol I select is imported in a separate import statement (separate line), resulting in multiple import { ... } from 'vue' statements.
Note: I already reported this issue to VSCode devs (https://github.com/microsoft/vscode/issues/227042) but they said it's Vue related and should be reported here.
VSCode Extensions (19)
| Extension | Author (truncated) | Version |
|---|---|---|
| project-manager | ale | 12.8.0 |
| npm-intellisense | chr | 1.4.5 |
| path-intellisense | chr | 2.9.0 |
| js-codeformer | cms | 2.6.1 |
| vscode-eslint | dba | 3.0.10 |
| gitlens | eam | 15.3.1 |
| EditorConfig | Edi | 0.16.4 |
| prettier-vscode | esb | 11.0.0 |
| html-slim-scss-css-class-completion | gen | 1.7.8 |
| JavaScriptSnippetsStandard | jms | 1.8.0 |
| remote-ssh | ms- | 0.113.1 |
| remote-ssh-edit | ms- | 0.86.0 |
| remote-explorer | ms- | 0.4.3 |
| abracadabra | nic | 9.4.6 |
| material-icon-theme | PKi | 5.10.0 |
| vscode-yaml | red | 1.15.0 |
| volar | Vue | 2.1.2 |
| vscode-todo-highlight | way | 1.0.5 |
| material-theme | zhu | 3.17.2 |
What is expected?
Expected result is to reuse the 1st import statement and add the symbol there.
What is actually happening?
Here is the state before I auto-import the second symbol from vue:
And here is what happens immediately after I hit Enter on the
computed symbol:
Link to minimal reproduction
No response
Any additional comments?
No response
Can't reproduce. Please try to reproduce this with an empty vscode profile (no extensions). If you can still reproduce, let me know. Otherwise, enable one extension after the other in the empty profile to find out if this issue is caused by a thirdparty extension. Thanks
There seems to be a regression. Nuxt auto-imports are not working in 2.1x
Can't reproduce. Please try to reproduce this with an empty vscode profile (no extensions). If you can still reproduce, let me know. Otherwise, enable one extension after the other in the empty profile to find out if this issue is caused by a thirdparty extension. Thanks
I have disabled all extensions, except Volar (so that it can autocomplete in a .vue file) and the problem is still happening. Interesting thing is - every time I restarted an extension after disabling it, auto-import worked properly only the 1st time but when I Ctrl-Z and try to do it again, it was still adding a separate import line.
Here is how to reproduce it (this is my setup):
- Install Quasar:
yarn global add @quasar/cli(use yarn v1.x) - Create a new Quasar project:
yarn create quasar(accept all defaults) - Open the new project folder in VSCode (only Volar extension is enabled)
- Create a new .vue file in
src - Try to reproduce the above behaviour
The result is:
<template>
<div>A</div>
</template>
<script setup>
import { computed } from 'vue'
import { ref } from 'vue'
const t1 = ref()
const t2 = computed
</script>
<style lang="scss" scoped></style>
I just tested with a brand new Vue project (npm create vue@latest) and there is NO problem there. It might be related to Quasar somehow. I will be reporting this to the Quasar team as well.
-
Please show the Vue langauge status of your vscode status bar.
-
Please try creating a new .ts file. Can you reproduce the problem in that .ts file?
Experiencing this as well, this only occurs in .vue files, not seeing any issue in .ts files.
https://github.com/user-attachments/assets/5e5a5772-476f-49e4-9710-407fd52a58ca
Note popup incorrectly shows Hybrid ModeDisabled, even tho workspace option is typeScriptPluginOnly
We are no longer actively maintaining LSP-only mode, does enabling hybrid mode resolve the problem?
Which option is that?
Edit: changing it to auto does seem to fix it for duplicate vue imports, though it breaks my monorepo auto imports with different issues.
though it breaks my monorepo auto imports with different issues.
Is there an existing issue? If not, can you open a new issue?
I confirm that switching Hybrid Mode to auto does resolve the issue (mine was previously set to false, possibly since the switch from old Volar).
Having the same issue. Tried new project - looks to works well, but in existing one works randomly. I played with "Hybrid mode" - no difference. Removed all extensions apart Volar, and removed anything JS related from the project. It still works randomly 🤯
Screencast From 2024-12-03 18-08-20.webm
@KazariEX Can you please suggest if this was really fixed, since I see no change in the just updated version 2.2.6? The problem remains the same as reported above.
I closed this issue because I cannot reproduce it and no one provides any minimal reproduction.
@KazariEX look, I've stripped down my case to a smallest one I can reproduce and made a repo to test.
https://github.com/tomastan/vuejs-language-tools-import-problem-example
Just clone it and run npm i
This make me reproduce almost all the time. Here it is:
https://github.com/user-attachments/assets/61591d6f-92c8-4dc1-abc3-4c1d9043bdad
Important
What did I found is that the problem looks to be connected with vue-tel-input package. When I remove it, all works fine. I have no idea how this is connected though. Hope it helps. Since this bug is really irritating :)
Does changing
jsconfig.jsontotsconfig.jsonresolve your problem?
Yes. This helps. Is this by design?
Are you able to replicate it now?
Yep, but I have no idea how to resolve it.
@KazariEX clear. At least there is a quick fix of jsconfig.json to tsconfig.json renaming and you know about this bug to possibly find a universal solution.
