VSCode中使用defineComponent时Vue Volar模板自动补全/智能提示失效

1. 调整vueCompilerOptions配置 #

你当前配置的optionsWrapper是针对动态导入defineComponent的场景，但你的组件使用的是静态导入，该配置反而会干扰Volar的正常识别。建议直接移除该配置项：

// tsconfig.json
"vueCompilerOptions": {
  // 移除 optionsWrapper 相关配置
}

2. 配置Pug模板支持 #

Volar对Pug模板的语法提示需要额外插件支持：

• 安装依赖：

npm install @volar-plugins/pug --save-dev

• 在项目根目录创建volar.config.js：

module.exports = {
  plugins: [
    require('@volar-plugins/pug').default(),
  ],
};

• 确保VS Code中安装了官方维护的Pug插件

3. 重置Volar服务 #

强制重启Volar语言服务，清除缓存：

• 打开VS Code命令面板（Ctrl+Shift+P / Cmd+Shift+P）
• 执行Vue: Restart Vue Language Server
• 重启VS Code

4. 检查TS配置的文件覆盖范围 #

确保tsconfig.json的include字段包含所有Vue组件文件：

"include": [
  "src/**/*.vue",
  "src/**/*.ts"
]

5. 显式标注setup返回类型 #

手动定义setup函数的返回值类型，帮助Volar更精准推断模板变量：

import { defineComponent } from "vue";

interface SetupReturn {
  test: {
    foo: {
      bar: string;
    };
  };
}

export default defineComponent({
  setup(): SetupReturn {
    const test = {
      foo: {
        bar: "test",
      },
    };

    return { test };
  },
});

6. 排查插件冲突 #

禁用旧版Vetur或其他Vue/TS相关插件，避免与Volar的功能冲突。

内容的提问来源于stack exchange，提问作者schranzer45