Vue Volar 模板自动完成/智能感知不适用于 VSCode 中的 DefineComponent

Question

问题

使用 DefineComponent 时，我无法让语法突出显示/智能感知与 volar 一起使用。 我有：

• 已安装 TypeScript Vue 插件 (Volar)
• 安装了Vue语言功能（Volar）
• 设置接管模式

我已经添加了

"vueCompilerOptions": {
    "optionsWrapper": [
      "(await import('vue')).defineComponent(",
      ")"
    ],

到我的 tsconfig。

示例

我有一个组件 FooComponent:

<template lang="pug">
div(:id="test.foo.bar")
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {

    const test = {
      foo: {
        bar: "test",
      },
    };

    return { test };
  },
});
</script>

自动完成在defineComponent块内部工作：

（我将鼠标悬停在

test

中的

defineComponent

上，它会显示对象结构）

但不在模板内部：

（我尝试自动完成

test.foo.

，但不建议使用

bar

）

将鼠标悬停在

test

上甚至不显示任何内容。

我已经尝试了一切，但无法让它发挥作用。 有人对如何解决这个问题有建议吗？

Answer 1

尝试按如下方式修改 tsconfig 文件

"vueCompilerOptions": {
   "target": 2.7, // or 3 (vue version in use)
   "extensions": [
    ".vue"
   ]
}