VSCode 跳转别名路径不生效，是因为它依赖 tsconfig.json 或 jsconfig.json 的 baseUrl 和 paths 配置，而非 webpack.resolve.alias；需确保二者一致，并重启 TS Server。
Webpack alias 配置了但 VSCode 不跳转？先检查 tsconfig.json 或 jsconfig.json
VSCode 跳转别名路径不生效，90% 的情况不是 Webpack 配置问题，而是编辑器本身没读到别名映射。VSCode 的路径跳转（Ctrl+Click）依赖 tsconfig.json（TypeScript 项目）或 jsconfig.json（纯 JavaScript 项目）里的 compilerOptions.baseUrl 和 compilerOptions.paths，它完全不读 webpack.config.js 里的 resolve.alias。
实操建议：
- 如果项目用 TypeScript，确保
tsconfig.json中有：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@components/*": ["src/components/*"] } } } - 如果是 JS 项目，新建
jsconfig.json（不能叫jsconfig.js），内容结构同上，但必须包含"checkJs": true才能启用路径提示和跳转 -
baseUrl必须是相对路径字符串（如"."），不能是变量或表达式；paths的 key 支持通配符*，但 value 数组里每个路径也必须以baseUrl为基准，且结尾带/*
Webpack alias 和 jsconfig.json paths 不一致会怎样？
两者可以不同，但不建议。Webpack 运行时按 resolve.alias 解析，VSCode 编辑时按 jsconfig.json 解析——如果两者对不上，会出现「代码能跑，但点不开」「点开是错文件」「重命名/重构时漏改」这类静默错误。
常见错误现象：
- 在
import Button from '@/components/Button'中 Ctrl+Click，跳转到了node_modules/@/components/Button（说明paths没配或配错了） - 修改了
webpack.config.js里的@指向src/pages，但jsconfig.json还指向src，结果跳转和编译行为割裂 - 使用了 Webpack 的
resolve.alias简写（如'@': path.resolve(__dirname, 'src')），但jsconfig.json写成"@/*": ["src/*"]—— 表面一样，实际 Webpack 的path.resolve可能受__dirname上下文影响，而jsconfig是静态解析，务必保持语义一致
VSCode 插件或缓存导致跳转失效？重启和验证步骤
即使配置全对，VSCode 有时也不会立刻响应。这不是 bug，是语言服务缓存机制在起作用。
实操建议：
- 保存
jsconfig.json或tsconfig.json后，按Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux），输入并执行Developer: Restart TS Server - 确认当前打开的文件夹是项目根目录（即
jsconfig.json所在目录），不是子文件夹——VSCode 不会向上查找配置文件 - 在任意
import语句上右键 →Go to Type Definition，如果提示 “No definition found”，说明路径解析彻底失败；如果提示 “No type definitions found” 但能跳转到 JS 文件，则是类型声明缺失，不影响路径跳转本身 - 禁用所有插件，只留官方 TypeScript 和 JavaScript 支持，排除插件干扰（尤其某些“路径别名增强”类插件反而会破坏原生逻辑）
React + Webpack 项目中 @ 符号被 ESLint 报错？别漏配 eslint-import-resolver-webpack
ESLint 的 import/resolver 默认不认 Webpack alias，所以即使跳转正常，import Button from '@/components/Button' 仍可能报 Unable to resolve path to module "@/components/Button"。
解决方式不是关掉规则，而是让 ESLint 和 Webpack 对齐：
- 安装
eslint-import-resolver-webpack：npm install --save-dev eslint-import-resolver-webpack
- 在
.eslintrc.js中配置：settings: { 'import/resolver': { webpack: { config: './webpack.config.js' } } } - 注意：该 resolver 会真实读取你的
webpack.config.js，所以确保resolve.alias是 plain object 形式（不要包裹在函数里），否则解析失败
路径跳转、类型检查、ESLint 校验三者各自依赖不同配置，它们互不替代。少配一个，就少一层保障。最易被忽略的是：很多人只配了 Webpack alias，以为万事大吉，结果编辑体验和静态检查全断了。
