VSCode自动导入代码模块_Vue项目必备的路径插件【技巧】-VSCode-PHP中文网

auto import 不生效的主因是 volar 未接管、tsconfig.json 路径配置错误或 vscode 语言模式非 vue；三者任一缺失均导致自动导入失效，且 template 区域组件引用依赖 volar 模板服务单独启用。

vscode自动导入代码模块_vue项目必备的路径插件【技巧】

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></script> 区域里写个 useRouter，光标停上按 Ctrl+. —— 如果弹出 Quick Fix 且含 “import from 'vue-router'”，说明通了

路径别名（@/、~/）导入失败，`tsconfig.json` 配了也不管用？

VSCode 的自动导入只认 tsconfig.json 里的 baseUrl 和 paths，Webpack/Vite 的 resolve.alias 对它完全无效。哪怕你 vite.config.ts 里 alias 写得再漂亮，VSCode 看不见。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

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></mycomp>）能否触发自动导入，完全取决于 Volar 的 template 语言服务是否启用。它和 script 区域是两套解析器 —— 你能在 script 里 Ctrl+. 导入成功，不代表 template 里也行。遇到这种情况，先确认 Volar 输出面板（Output → Volar）有没有报 Failed to resolve component 类错误。