VSCode无法识别别名路径，跳转Import时提示文件不存在

问题核心在于tsconfig.json的paths配置与vite.config.ts的别名不匹配：Vite的别名配置是正确的（所以项目构建、运行都正常），但VSCode的跳转功能依赖TypeScript的路径映射规则，两者不一致导致编辑器无法定位目标文件。

具体修复步骤 #

1. 修正tsconfig.json的paths配置 #

把原配置里的错误路径映射：

"paths": {
  "@styles": ["src/*"],
},

改成和vite.config.ts完全对应的路径，同时添加通配符以支持子目录文件的跳转：

"paths": {
  "@styles/*": ["src/assets/styles/*"]
},

如果存在直接导入@styles（不带子路径）的场景，可以补充无通配符的条目：

"paths": {
  "@styles": ["src/assets/styles"],
  "@styles/*": ["src/assets/styles/*"]
},

2. 重启VSCode的TypeScript服务 #

修改配置后编辑器不会自动加载新规则，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server并执行，让新配置生效。

完成以上操作后，再次点击别名Import即可正常跳转至对应文件。

内容的提问来源于stack exchange，提问作者Виталик Черный