VSCode识别不了@/别名是因为它默认不解析构建工具定义的路径别名，必须通过项目根目录下的jsconfig.json或tsconfig.json显式配置compilerOptions.baseUrl为"."和paths为"@/": ["src/"]，并确保通配符完整、文件位置正确，否则将出现跳转失败、补全失效和红色波浪线。
VSCode 为什么识别不了 @/ 这类别名？
因为 VSCode 默认只认标准 Node 模块路径，@/、~/ 这类别名是构建工具或配置文件“额外约定”的，编辑器本身不自动理解。它需要你显式告诉它：“这个符号对应哪个物理路径”。否则会出现红色波浪线、跳转失败、补全失效。
tsconfig.json 或 jsconfig.json 是关键入口
VSCode 唯一依赖的配置文件就是项目根目录下的 tsconfig.json（TS 项目）或 jsconfig.json（JS 项目）。只要这两个文件存在且含 paths，编辑器就会立即生效——不用重启，改完保存就行。
-
baseUrl必须设为"."，表示所有别名都从项目根开始解析 -
paths里每个键必须带通配符*，比如"@/*"，不能写成"@" - 值数组里路径也必须带
*，比如["src/*"]，不能漏掉 - 如果项目用 ESM（
"type": "module"），确保compilerOptions.moduleResolution设为"node"或"nodenext"，否则 TS 语言服务可能忽略paths
别名在运行时无效？那是构建工具没同步配置
VSCode 能跳转 ≠ 代码能跑。编辑器识别和运行时解析是两件事。比如 import Button from '@/components/Button.vue' 在 VSCode 里绿色可跳转，但执行时报 Cannot find module '@/components/Button.vue'，说明构建工具（Vite/Webpack/Next.js）没配 alias。
- Vite：在
vite.config.js的resolve.alias中写{"@": "/src"}（注意前缀斜杠） - Webpack：在
webpack.config.js的resolve.alias中写{"@": path.resolve(__dirname, "src")} - Next.js：在
next.config.js的webpack.resolve.alias中配置，且需启用experimental.esmExternals（ESM 场景） - 纯 Node.js（非构建场景）：需靠
module-alias+require('module-alias/register')，且package.json中加_moduleAliases字段
调试时断点不生效，别只盯着 PATH
即使 node -v 和 npm run dev 都正常，VSCode 调试器仍可能报 Cannot find runtime 'node'。这是因为调试器不读终端的 PATH，也不走构建工具的 alias 逻辑。
- 检查
.vscode/launch.json是否有硬编码的runtimeExecutable，有就删掉——让它自动找 - 若用了
nvm或volta，调试器无法动态切换版本，必须在launch.json中写死路径，如"runtimeExecutable": "/Users/xxx/.volta/bin/node" - TS 文件调试要加
"runtimeArgs": ["--loader", "ts-node/esm"]，否则import语法会直接报错退出 -
launch.json里的program推荐用"${file}"，避免每次换文件都要改路径
真正容易被忽略的是：VSCode 的路径别名支持只作用于编辑器体验，而运行、打包、调试各自走不同链路。三者配置必须对齐，缺一不可；哪怕只差一个斜杠或少一个星号，都会导致“看着对，跑不通”。
