vue单文件中@click等指令补全失效，主因是emmet与语言模式不匹配：需将.vue文件关联为html模式并启用html.suggest.html5，或volar用户开启volar.html.suggest.html5及autoimportcompletion。
Vue 单文件中 @click、v-model 等指令补全失效，不是插件没装，而是 Emmet 和语言服务没对上号。
Vue 模板里输入 @ 不提示指令？检查 files.associations 和语言模式
VSCode 默认把 .vue 文件识别为 Vue 语言模式，但 Emmet 的 HTML 补全只在 html 模式下默认激活。不改关联，@cl 就永远等不到 @click 提示。
- 打开
settings.json，加这一行："files.associations": { "*.vue": "html" } - 保存后，必须重启 VSCode（仅重载窗口不够）
- 打开一个
.vue文件，点右下角语言标识，确认显示的是HTML而非Vue或Vue HTML - 如果用了 Volar（推荐），它会覆盖这个设置——此时应改用 Volar 的专属配置：
"volar.autoImportCompletion": true，而不是强行切语言模式
html.suggest.html5 关了？语义标签和指令缩写都受影响
这个开关控制的不只是 <header></header> 这类标签，Emmet 在 <template></template> 中的指令缩写（如 @cl → @click）也依赖它。关掉后，连 v- 开头的指令都不提示。
- 搜索
html.suggest.html5，确保勾选或设为true - 该设置只对
html语言模式生效；若你用 Volar，则此选项无效，需靠volar.trace.server查日志确认指令补全是否注册成功 - 别和
emmet.triggerExpansionOnTab混淆：后者管按 Tab 展开缩写，前者管输入过程中的实时提示
属性值补全（如 class="" 里列项目 CSS 类）为什么没反应？
这不是 Vue 特有问题，而是 CSS 语言服务没介入模板区域。Vue 文件里的 class 值补全，需要 CSS 语言服务器主动监听 <template></template> 块内的字符串上下文。
- 确保项目根目录有
.css或.scss文件，且未被files.exclude隐藏 - 安装
tailwindcss-intellisense（如果用 Tailwind），并检查tailwindCSS.experimental.classRegex是否匹配你的 class 绑定写法（如:class="xxx"） - Volar 用户需开启：
"volar.html.suggest.html5": true（注意是volar.前缀，不是全局html.） - 禁用旧插件
Vetur：它和 Volar 冲突，会导致 CSS 类补全静默失败
补全弹出来了但顺序乱、重复、响应慢？优先查缓存和插件冲突
补全列表质量下降，90% 不是配置错，而是语言服务器卡在旧缓存或被插件劫持。特别是装了多个补全类插件（如 Auto Close Tag + Path Intellisense + GitHub Copilot）时，触发逻辑容易打架。
- 临时禁用所有非必要插件，只留 Volar（或 Vetur）+ Prettier + ESLint，测试
Ctrl+Space是否干净 - 删除
~/.vscode/extensions下疑似冲突的插件文件夹（如formulahendry.auto-close-tag） - 在 Vue 文件中右键 →
Developer: Toggle Developer Tools→ Console 里看有没有ERR或LanguageClient报错 - 别调
editor.quickSuggestionsDelay到0：Vue 模板解析开销大，设为50更稳
最常被忽略的一点：Volar 的指令补全只在 <template></template> 块内生效，<script setup></script> 里输 ref 是 TypeScript 服务的事，和 HTML 设置无关。混在一起排查，只会让问题更模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
