VSCode中@/components/Button报红或点不开，是因为编辑器仅依赖tsconfig.json（或jsconfig.json）的baseUrl和paths配置识别别名，完全无视Webpack/Vite的resolve.alias；必须确保配置文件位于根目录、baseUrl设为"."、paths键带"*"、修改后重启TS服务。
VSCode 里写 @/components/Button 报红或点不开？不是构建工具没配好，而是编辑器根本没“看见”这个别名——必须让 tsconfig.json（或 jsconfig.json）和构建工具配置对齐，且各自生效条件满足。
为什么 VSCode 不识别 Webpack/Vite 的 resolve.alias 配置
VSCode 的跳转、补全、报错提示完全依赖 TypeScript 语言服务（或 JS 语言服务），它只读 tsconfig.json 中的 compilerOptions.baseUrl 和 compilerOptions.paths，对 webpack.config.js 或 vite.config.ts 里的 resolve.alias 视而不见。
- 常见错误现象：
import Button from '@/components/Button.vue'在浏览器能跑，但 VSCode 显示 “Cannot find module '@/components/Button.vue'”，Ctrl+Click 跳转失败 - 根本原因：VSCode 没加载到有效路径映射，不是插件问题，也不是 Webpack 配错了
- 验证方式：打开任意
.ts文件，右下角状态栏应显示 “TypeScript x.x.x”；若显示 “JavaScript”，说明tsconfig.json未被识别
tsconfig.json 必须正确配置 baseUrl 和 paths
这是 VSCode 识别别名的唯一依据。配置不满足以下任一条件，别名就无效。
-
baseUrl必须是字符串"."（项目根目录），不能是"./src"或变量表达式 -
paths的 key 必须带通配符*，例如"@/*"，不能写成"@/"或"@/components/*"（后者虽可工作，但会限制别名复用） - value 数组中每个路径必须以
baseUrl为基准，且结尾带/*，例如["src/*"]，不能是["src"]或["./src/*"] - 修改后必须手动重启 TS 服务：按
Ctrl + Shift + P→ 输入并执行TypeScript: Restart TS Server
正确示例（tsconfig.json）：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
},
"include": ["src/**/*"]
}
Vite/Webpack 运行时 alias 必须与 paths 语义一致
构建工具负责实际模块解析，它和 tsconfig.json 是两套系统。两者路径指向不一致，就会出现「能跳转但运行报错」或「能运行但重构漏改」这类静默问题。
- Vite 中推荐用
path.resolve(__dirname, 'src')，避免'/src'这种硬编码斜线写法（在某些 monorepo 场景下可能失效） - Webpack 若使用
tsconfig-paths-webpack-plugin，需确保configFile指向正确的tsconfig.json路径 - 别名值不要省略前导斜线：Webpack/Vite 中写
'@': '/src'是对的，'@': 'src'是错的（会被当作相对路径解析） - monorepo 中跨包引用（如
@shared）必须用path.resolve(__dirname, '../shared')，不能写'/../shared'
Vite 示例（vite.config.ts）：
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@shared': path.resolve(__dirname, '../shared')
}
}
});
纯 JavaScript 项目必须用 jsconfig.json，且启用类型检查
如果你没用 TypeScript，但希望 VSCode 支持别名跳转和补全，jsconfig.json 是必需的，且不能简单复制 tsconfig.json 内容。
- 文件名必须是
jsconfig.json（不是jsconfig.js），且放在项目根目录 - 必须包含
"checkJs": true，否则路径提示不会激活 -
baseUrl和paths配置规则与 TypeScript 完全相同 - 如果项目同时含
.ts和.js文件，建议统一用tsconfig.json并在include中覆盖 JS 路径
JS 项目最小可用配置（jsconfig.json）：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"checkJs": true
},
"include": ["src/**/*"]
}
最容易被忽略的点：路径别名不是“配完就能用”的功能，它是两套独立机制（编辑器提示 vs 运行时解析）的协同结果。只要其中一环缺失或语义不一致，就会出现半边正常、半边失效的诡异行为。每次改完配置，记得验证 TS Server 是否已重启、include 是否覆盖当前文件、以及构建工具输出的 bundle 是否真能 resolve 到目标模块。
