如何让VSCode识别Alias路径？

配置路径映射可让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 字段识别别名。

在项目根目录的配置文件中添加如下内容：

说明：

• 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 路径，提升开发体验。不复杂但容易忽略。