vue代码补全失效主因是语言模式错误或emmet未配置，需确保.vue文件识别为“vue”模式、卸载vetur、配置emmet.includelanguages支持vue-html、启用snippetspreventquicksuggestions及tabcompletion，并检查tsconfig.json含"vue"类型。
Vue代码自动补全在VS Code里不生效，90%的情况不是插件没装，而是语言模式识别错了或Emmet没被正确触发。 你敲v-if按Tab没反应、template不展开、script块里defineProps没提示——这些问题背后是几个关键配置点没对齐，不是重装插件就能解决的。
确认.vue文件被识别为“Vue”而非“HTML”或“Plain Text”
VS Code对.vue文件的处理完全依赖语言模式。右下角状态栏显示“HTML”或“Plain Text”，说明Volar根本没接管；显示“Vue”或“Vue HTML”才是正常起点。点击该标识可手动切换，但治标不治本：
- 检查是否已禁用
Vetur（它和Volar冲突，必须卸载） - 确保项目根目录有
jsconfig.json或tsconfig.json，否则Volar可能无法激活TS/JS语言服务 - 打开一个
.vue文件后，按Ctrl+Shift+P运行Developer: Toggle Developer Tools，在Console里搜volar，看是否有报错如"Failed to activate Volar"
让<template></template>块启用Emmet缩写（div→<div></div>）
Emmet默认只在html语言模式下激活，而.vue里的<template></template>块需要显式声明支持。直接改settings.json：
{
"emerald.emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
},
"[vue]": {
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
}
}
}
注意：vue-html是Volar为<template></template>块分配的语言ID，不是你手动写的；如果仍无效，检查是否误加了"html": "html"这类冗余项，会覆盖掉vue-html的映射。
启用Volar内置代码片段（vbase、vfor等）
Volar extension Pack自带片段，但默认不开启Tab触发。需手动启用：
- 打开
settings.json，添加"editor.suggest.snippetsPreventQuickSuggestions": false（否则片段会被智能提示压制） - 确保
"editor.tabCompletion": "on"已开启（不是"onlySnippets"） - 输入
vbase后按Tab，应生成含<script setup></script>的完整骨架；若只弹出函数名建议，说明vue语言模式下的片段未加载 - 片段路径在Volar源码中为
server/src/modes/vue/veturSnippets/，你也可以把自定义片段放~/.vscode/extensions/vue.volar-*/snippets/下（不推荐，升级易丢失）
组件名和v-model等指令补全失效的排查点
这类补全依赖Volar的SFC解析能力，常见断点在：
-
script setup中未用defineOptions声明name，导致组件无法被模板识别 - 局部注册组件时用了
components: { MyBtn }但没导入MyBtn，Volar会跳过索引 -
v-model提示缺失，大概率是defineModel未启用（Vue 3.4+才支持），检查compilerOptions.isCustomElement是否干扰了属性推导 - 重启VS Code后首次打开
.vue文件，Volar可能延迟1–2秒才加载完成，此时补全暂不可用，属正常现象
最常被忽略的是：Volar对script setup的类型推导强依赖tsconfig.json中的"compilerOptions.types"是否包含"vue"——漏掉这一项，defineProps、defineEmits的参数提示全挂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
