VSCode 默认不将.vue文件识别为Vue文件，需正确配置files.associations为"*.vue": "vue"、启用Volar Take Over Mode并完全重启窗口、添加vue.d.ts声明文件，三者缺一不可。
VSCode 默认不把 .vue 当作 Vue 文件处理，它只按配置决定用哪种语言模式解析——没配 files.associations，就可能 fallback 到 HTML 或 Plain Text，导致高亮、跳转、类型提示全失效。
为什么右下角显示 “HTML” 或 “Plain Text”
VSCode 不靠后缀名自动猜语言，而是查三层：当前文件的 languageId（手动选的）→ 工作区或用户设置里的 files.associations → 文件扩展名本身。如果 files.associations 里 "*.vue" 被映射成 "html" 或压根没配，就会卡在第一层。
- 常见诱因：从其他编辑器迁移项目、重装 VSCode 后未同步设置、团队共用 settings.json 但删掉了关联项
- 验证方式：打开任意
.vue文件，点右下角语言标识 → 看显示的是不是Vue；如果不是，说明 languageId 没设对 - 临时修复：快捷键
Ctrl+Shift+P→ 输入Change Language Mode→ 回车 → 选Vue；但这只是单文件生效，关掉再开又回退
files.associations 配置写错的典型表现
这个配置必须精确匹配，大小写、引号、路径通配符都敏感。写错不会报错，但直接失效。
- 错误写法：
"*.Vue": "vue"（.Vue大写，Windows 下可能侥幸工作，macOS/Linux 下无效） - 错误写法：
"vue": "vue"（缺*和点，匹配不了任何文件） - 错误写法：
"*.vue": "Vue"（languageId 是小写vue，大写Vue不识别） - 正确写法：在
.vscode/settings.json里加这一行："*.vue": "vue" - 进阶注意：如果项目同时有
.vues或自定义后缀，得单独加一行，比如"*.vues": "vue"
Volar 启用 Take Over Mode 后仍不生效
即使 files.associations 对了，Volar 的 Take Over Mode 没真正接管，.vue 里的 <script setup> 还是当普通 TS/JS 处理，defineProps 报红、ref 无类型推导。
立即学习“前端免费学习笔记（深入）”；
- 先确认是否点了安装时的弹窗 “Yes”；没点的话，手动执行命令：
Volar: Take Over Mode - 执行后必须完全重启 VSCode 窗口（不是重载窗口），否则旧语言服务进程还在跑
- 检查有没有和 Vetur 共存：Vetur 会主动禁用 Volar，卸载 Vetur 再试
- 确保项目根目录存在
tsconfig.json或jsconfig.json；空文件也行，但不能缺失
vue.d.ts 声明文件缺失导致 TS 报错
VSCode 底层用 TypeScript Server 校验类型，但 TS 默认不认识 .vue 后缀——所以 import 一个 .vue 组件时，会报 Cannot find module '*.vue'。
- 解决办法：在项目根目录（和
tsconfig.json同级）新建vue.d.ts - 内容只需一段声明：
declare module "*.vue" { import { defineComponent } from "vue"; const component: ReturnType<typeof defineComponent>; export default component; } - 然后在
tsconfig.json的include数组里加上"vue.d.ts" - 注意：如果用了 pnpm，且
node_modules在 store 外挂路径，可能需额外给 VSCode 授予该路径读取权限（macOS 尤其常见）
真正卡住人的从来不是“装哪个插件”，而是 languageId 没设对、Take Over Mode 没重启、vue.d.ts 没放对位置这三处——它们不报错，只静默失效，排查时容易跳过。
