VSCode代码自动纠错工具_VSCode快速迁移Vue工程【工具】-VSCode-PHP中文网

VSCode中Vue项目import跳转失效的根本原因是路径映射、语言服务和工作区加载未对齐：@别名未在tsconfig.json/jsconfig.json中正确定义paths与baseUrl，Volar未启用或状态栏未显示“Vue (Volar)”，且未重启VSCode窗口重建语言服务索引。

vscode代码自动纠错工具_vscode快速迁移vue工程【工具】

VSCode 里 Vue 项目保存后不自动修 import、跳不到 @/api/user、Ctrl+P 找不到组件——问题不在插件没装，而在路径映射、语言服务和工作区加载这三处没对齐。

VSCode 不认识 @，不是 Volar 或 Vetur 的锅，是它压根没被告诉 @ 指向哪。跳转依赖 TypeScript/JavaScript 语言服务读取 jsconfig.json 或 tsconfig.json 中的 paths 配置，且必须显式写全路径。

paths 必须配成 "@/*": ["src/*"]，不能只写 ["*"] —— 后者会让 TS 认为 @/api/user 是相对当前文件的路径，而非从 src 开始
确保 baseUrl 已设为 "src" 或 "."（若 paths 用的是相对 src 的写法，则 baseUrl 必须是 "src"）
改完配置后，必须关闭并**重启 VSCode 窗口**（仅重载窗口不够），否则语言服务索引不会重建
右下角状态栏应显示 Vue (Volar)，而不是 Vue 或 Plain Text；若显示不对，右键 .vue 文件 → Change Language Mode → 选 Vue

这个设置只是“开关”，真正干活的是背后的语言服务是否支持、是否能识别错误、以及有没有权限执行修复。Vue 3 项目中，source.organizeImports 和 source.fixAll.typescript 是补 import 和修类型错误的关键，但它们默认关闭。

确认项目根目录有有效的 tsconfig.json，且 "compilerOptions": { "noEmit": true } 这类基础项存在
在工作区 settings.json 中启用具体动作："source.organizeImports": true、"source.fixAll.typescript": true、"source.fixAll.typescriptreact": true
ESLint 的 source.fixAll.eslint 要生效，前提是项目本地安装了 ESLint（node_modules/.bin/eslint 存在），全局安装不认
如果同时开了 Prettier 的 formatOnSave 和 ESLint 的 fixAll，可能冲突；建议只让 ESLint 统一管“语法+风格”，关掉 prettier.eslintIntegration（已废弃）或设 "eslint.format.enable": false

VSCode 的模糊搜索（Ctrl+P）只索引「当前工作区根目录」下的文件，跟标签页是否打开无关。单独用 File → Open File… 打开的 .vue 文件，哪怕正在编辑，也不会进索引。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

必须用 File → Open Folder… 打开整个项目根目录（含 package.json、src/、tsconfig.json）
检查 settings.json 中的 files.exclude 和 search.exclude，别误加了 "**/*.vue" 或 "src/**/*"
搜索提速技巧：UserCard.vue 直接输文件名；@useUser 可搜组件内函数；git: 前缀查未提交文件
如果组件在 node_modules 或子工作区（.code-workspace），需额外配 typescript.preferences.includePackageJsonAutoImports，否则不索引

这不是兼容性问题，是明确互斥：Volar 是 Vue 3 官方语言服务，Vetur 是 Vue 2 时代产物，两者共存会覆盖彼此的类型推导逻辑，尤其在 <script setup></script> 中表现为 ref、computed 不提示、变量标红。

Vue 3 项目：彻底卸载 Vetur，只留 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar)
Vue 2 项目：禁用所有 Volar 插件，只启用 Vetur，并确保 vetur.validation.script 设为 true
验证方式：打开 .vue 文件，看右下角状态栏是否稳定显示 Vue (Volar) 或 Vue (Vetur)；若闪烁或显示异常，右键 → Setup Vue Server (Volar) 或 Restart Vetur Server
插件装了≠服务启了：按 Ctrl+Shift+P → Developer: Toggle Developer Tools → Console 里搜 language server started，确认对应服务已启动