Bug: Auto import from vue adds separate import statements in .vue files

[ddenev]

What happened?

In VSCode, 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.

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:

This happens only in .vue files, works ok in .js files.

Important: this also works in a pure Vue project (npm create vue@latest), only in Quasar project the problem exists. See reproduction.

Note: I already reported this issue to:

• VSCode devs (Bug: Auto import from Vue.js adds separate import statements microsoft/vscode#227042)
• Volar devs (Bug: Auto import from vue adds separate import statements in .vue files vuejs/language-tools#4756)

What did you expect to happen?

Expected result is to reuse the 1st import statement and add the symbol there.

Reproduction URL

https://codepen.io/ddenev/pen/QWXVNyL

How to reproduce?

This is only reproducible in VSCode.

1. Install Quasar: yarn global add @quasar/cli
2. Create a new Quasar project: yarn create quasar (accept all defaults)
3. Open the new project folder in VSCode (only Volar extension is enabled)
4. Create a new .vue file in src
5. 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>

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

VSCode version 1.92.2
Volar version 2.1.2
Quasar version 2.16.9

[Dtsiantaris]

Doesn't this resolve the issue?

[rstoenescu]

Hi,

This bug has nothing to do with Quasar itself, but rather with VSCode or Volar.