Auto Import 不生效的主因是 Volar 未接管、tsconfig.json 路径配置错误或 VSCode 语言模式非 Vue；三者任一缺失均导致自动导入失效，且 template 区域组件引用依赖 Volar 模板服务单独启用。
Vue 项目里 Auto Import 不生效，不是插件没装，而是 Volar 没接管、tsconfig.json 路径没对齐、或者状态栏语言模式仍是 html 或 javascript —— 这三处错一个，@/components/MyButton 就永远变不成自动 import。
为什么 .vue 文件里 template 写 却不提示导入？
根本原因是 VSCode 没把当前文件识别为 Vue 语言上下文，Volar 服务压根没加载。右下角状态栏如果显示 HTML、JavaScript 或 Plain Text，那所有自动导入逻辑都跳过。
- 点击右下角语言模式标签（如 “Vue”），手动切换成
Vue（不是Vue HTML或Vetur） - 确认已卸载旧版
Vue - Official（它和 Volar 冲突），只保留Volar（作者：johnsoncodehk） - 打开命令面板（
Ctrl+Shift+P），运行TypeScript: Restart TS server和Volar: Restart Server各一次 - 在
.vue文件的<script setup>区域里写个useRouter，光标停上按Ctrl+.—— 如果弹出 Quick Fix 且含 “import from 'vue-router'”，说明通了
路径别名（@/、~/）导入失败，tsconfig.json 配了也不管用？
VSCode 的自动导入只认 tsconfig.json 里的 baseUrl 和 paths，Webpack/Vite 的 resolve.alias 对它完全无效。哪怕你 vite.config.ts 里 alias 写得再漂亮，VSCode 看不见。
-
tsconfig.json中必须有：{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"], "~/*": ["src/*"] } } } -
baseUrl值不能是空字符串或"./src"，必须是"./"（相对项目根目录） - 改完
tsconfig.json后，必须重启 Volar + TS Server，否则缓存路径不会刷新 - 验证方式：在
script setup里输入import { useX } from '@/composables'，看是否能自动补全文件列表 —— 补不出来，说明paths没生效
保存时自动整理 import，但 source.organizeImports 不起作用？
这个设置只对当前文件生效，且只在保存瞬间触发。它不会跨文件扫描、不会帮你从 lodash 里挑命名导入还是默认导入，更不会修复路径别名 —— 它只做三件事：增删未使用项、按字母排序、合并重复 import。
立即学习“前端免费学习笔记（深入）”；
- 确保 settings.json 里有：
"editor.codeActionsOnSave": { "source.organizeImports": true } - 注意：该配置不依赖 Volar，但要求当前文件语言模式是
Vue或TypeScript，不是JavaScript - 如果保存后 import 没变化，检查是否被 ESLint 插件劫持 —— 关闭
eslint.codeAction.onSave.fixAll，或把它和source.organizeImports分开配置 - 常见坑：
vetur.validation.script必须设为false，否则 Vetur 会拦截组织逻辑，导致source.organizeImports彻底静默
最易被忽略的一点：Vue 单文件中 template 区域的组件引用（比如 <MyComp>）能否触发自动导入，完全取决于 Volar 的 template 语言服务是否启用。它和 script 区域是两套解析器 —— 你能在 script 里 Ctrl+. 导入成功，不代表 template 里也行。遇到这种情况，先确认 Volar 输出面板（Output → Volar）有没有报 Failed to resolve component 类错误。
