配置路径映射可让VSCode识别Alias，需在tsconfig.json或jsconfig.json中设置baseUrl和paths，如"@/": ["src/"]，并确保构建工具别名一致，最后重启TypeScript服务生效。
要让 VSCode 正确识别项目中使用的 Alias 路径（例如 @/components/Button），需要配置路径映射，使编辑器能跳转、提示和校验这些模块。以下是具体实现方法。
1. 配置 tsconfig.json 或 jsconfig.json
VSCode 通过 tsconfig.json（TypeScript 项目）或 jsconfig.json（JavaScript 项目）中的 paths 字段识别别名。
在项目根目录的配置文件中添加如下内容：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@components/*": ["src/components/*"] } } }说明：
-
baseUrl: "."表示相对根目录解析。 -
"@/*": ["src/*"]表示所有以@/开头的导入指向src目录。
配置后，VSCode 的语法提示、跳转定义等功能即可正常工作。
2. 确保配置文件存在
如果项目没有 tsconfig.json 或 jsconfig.json，手动创建一个。例如 JavaScript 项目可创建 jsconfig.json：
3. 搭配构建工具使用
VSCode 只负责编辑时识别，实际运行仍需构建工具支持。
常见搭配：
-
Vite：使用
resolve.alias配置。 -
Webpack：使用
resolve.alias。 -
Next.js：默认支持
@指向src（若启用 src 目录）。
确保构建工具的 alias 与 tsconfig.json 中一致，避免运行时报错。
4. 重启 VSCode 或 TypeScript 服务
修改配置后，可能需要重启语言服务才能生效。
操作方式：
- 按下 Ctrl + Shift + P（Mac 为 Cmd）。
- 输入 “TypeScript: Restart TS Server” 并执行。
之后检查导入路径是否可跳转。
基本上就这些。只要配置好 tsconfig.json 或 jsconfig.json，VSCode 就能正确识别 Alias 路径，提升开发体验。不复杂但容易忽略。
