VSCode智能代码检查工具_VSCode快速切换Vue路由【策略】-VSCode-PHP中文网

VSCode中Vue路由跳转失效主因是@别名未被识别，需配置jsconfig.json/tsconfig.json的baseUrl和paths，并重启VSCode重建索引；ESLint与Prettier须协同配置，禁用冲突规则；Volar语言模式须启用且路由实例需正确注入。

vscode智能代码检查工具_vscode快速切换vue路由【策略】

VSCode 里 Vue 路由跳转失效、代码检查没反应，不是插件没装全，而是关键链路断在了别名识别或 Linter 配置上。

VSCode 默认不认识 @，它不会自动读 tsconfig.json 或 jsconfig.json 的 paths。Volar 或 Vetur 本身也不处理这个——它们只做类型推导，不解析路径。

确认项目根目录下有 jsconfig.json 或 tsconfig.json，且含 "baseUrl": "src" 和完整路径映射："@/*": ["src/*"]（不能只写 ["*"]）
装了 @ext:lihuiwang.vue-alias-skip 这类插件，也得手动在 VSCode 设置里填 alias 规则，它不会自动同步 tsconfig
改完配置或插件设置后，必须关闭并重新打开整个 VSCode 窗口（仅重载窗口不够），否则索引不会重建
右下角状态栏语言标识应为 Vue (Volar)，不是 Vue 纯文本；如果是 Vue 2 项目，要禁用 Volar，只留 Vetur

这不是插件冲突，是执行顺序和规则覆盖没对齐。ESLint 负责语义检查和修复，Prettier 只管格式，两者硬碰会互相覆盖。

先启用 ESLint 自动修复："editor.codeActionsOnSave": { "source.fixAll.eslint": true }，并确保 "eslint.run": "onSave"
再启用格式化："editor.formatOnSave": true，且 "editor.defaultFormatter": "esbenp.prettier-vscode"
必须加 eslint-config-prettier 到 .eslintrc.js 的 extends 最末尾，禁用所有与 Prettier 冲突的格式规则
Vue/TSX 项目还要设 "volar.autoInsertDotValue": false，否则 Prettier 会把 ref.value 错误格式化成 ref.value.

常见于 Vue 3 + Vue Router 4 组合，问题往往出在路由实例没正确注入，或组件路径加载失败，而非语法错误。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

确认 main.js（或 main.ts）中创建 app 后，确实传入了 router：createApp(App).use(router).mount('#app')
routes 数组里的 component 必须是异步导入函数，如 () => import('@/views/HomeView.vue')；直接写 HomeView 会导致组件未定义
路径匹配优先级：带参数的 /user/:id 会拦截 /user/new，若需精确匹配，加 exact: true 或拆分路由规则
使用 router.push() 后页面没变？检查控制台是否有 [Vue Router warn] No match found for location with path，说明路径没在 routes 中声明

它默认只查字符串和注释，且中文支持依赖显式配置，不是“开了插件就生效”。

右下角必须显示 Spell 图标，且当前文件语言模式正确（如 JavaScript React，不是 Plain Text）
在 settings.json 中明确设 "cSpell.language": ["en", "zh-cn"]，并开启 "cSpell.allowCompoundWords": true
变量名、函数名、HTML 属性名默认不检查——这是设计，不是 bug；想跳过特定词（如 vitepress），建 .cspell.json 加到 words 字段
CI 环境要用 CLI：npx cspell --no-progress "**/*.{js,ts,vue,md}" --ignore="node_modules/**"，插件在无 GUI 环境里完全不工作