Vue变量自动补全失效的根本原因是Vetur不支持Vue 3的setup语法糖和LSP协议，必须改用官方Volar插件，并配置tsconfig.json/jsconfig.json及Emmet支持。
Vue 变量自动补全在 VSCode 里默认不工作，根本原因不是插件没装，而是语言服务没正确接管 .vue 文件的 <script> 块——尤其当项目用的是 Vue 3 + TypeScript + setup 语法糖时，Vetur 已失效，必须用 Volar。
为什么 Vetur 补全 Vue 变量会失效
Vetur 是为 Vue 2 设计的，对 Vue 3 的响应式 API（如 ref、computed）、defineProps 类型推导、以及 <script setup> 中的顶层绑定缺乏语义理解。它只能做字符串级提示，无法识别 const count = ref(0) 后 count.value 的类型，更不会补全 props.xxx 中 xxx 的具体字段。
- 现象：输入
this.或props.没有属性提示，或只显示泛泛的any - 根本问题：Vetur 不支持 LSP（Language Server Protocol），无法与 TypeScript 语言服务深度协同
- 兼容性：Vue 3.3+ 项目中，Vetur 会主动禁用自身脚本块的语言功能，避免冲突
必须安装 Volar 而不是 Vetur
Vue 官方维护的 Volar 是当前唯一能提供准确 Vue 变量补全的语言服务器。它通过 TypeScript Vue Plugin 注入类型信息，让 TS 语言服务“看懂”setup 里的声明和返回。
- 安装方式：在扩展市场搜
Vue Volar extension Pack（官方发布，含Volar+TypeScript Vue Plugin+Volar: Vue Language Features） - 禁用 Vetur：安装 Volar 后，VSCode 会弹窗提示“检测到 Vetur，是否禁用？”，点“是”；也可手动在扩展列表中禁用
Vetur - 验证是否生效：打开一个
.vue文件，在<script setup>中写const a = ref(1)，再输入a.—— 应立刻出现value、toString等完整提示
jsconfig.json 或 tsconfig.json 必须存在且配置正确
Volar 补全依赖项目级类型配置。没有 tsconfig.json（TypeScript 项目）或 jsconfig.json（JavaScript 项目），它无法推导 defineProps 和 defineEmits 的结构，变量补全就会退化为盲猜。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 最小必要配置（JS 项目）：
{ "compilerOptions": { "allowJs": true, "checkJs": true, "moduleResolution": "node", "allowSyntheticDefaultImports": true, "resolveJsonModule": true, "types": ["vue"] }, "include": ["src/**/*"], "exclude": ["node_modules"] } - Vue 3 项目务必加
"types": ["vue"]，否则Ref、Component等全局类型不可见 - 如果用
defineProps<{...}>()显式声明，补全会立即精准；若用运行时声明（defineProps({})），需确保compilerOptions.types包含vue
Emmet 对 <template> 的补全要单独激活
很多人以为装了 Volar 就万事大吉，结果发现 <template> 里输 div + Tab 没反应——这不是 Volar 的事，是 Emmet 没被正确触发。
- 必须在设置中显式告诉 VSCode：
.vue文件的模板部分按 HTML 处理："emmet.includeLanguages": { "vue-html": "html", "vue": "html" } - 同时确认
editor.quickSuggestions对vue和vue-html语言模式开启："editor.quickSuggestions": { "other": true, "comments": false, "strings": false, "vue": true, "vue-html": true } - 右下角状态栏点击语言模式，确认当前是
Vue（不是HTML或Plain Text），否则 Emmet 不加载
最常被忽略的一点：Volar 的补全能力高度依赖你写的代码是否“可推导”。比如用 const props = defineProps(...) 但没写类型参数，或在 setup() 函数里手动解构 props，都会切断类型链路——补全就断了。与其反复调插件，不如先检查类型声明是否完整。
