配置路径映射可让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 路径，提升开发体验。不复杂但容易忽略。

# javascript  # java  # vscode  # js  # json  # vite  # typescript  # 工具  # mac  # 配置文件 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Python进程池调度策略_任务分发说明【指导】  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  网站建设要注意的标准 促进网站用户好感度！  java获取注册ip实例  北京网站制作的公司有哪些,北京白云观官方网站？  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  公司门户网站制作流程,华为官网怎么做？  长沙做网站要多少钱,长沙国安网络怎么样？  Firefox Developer Edition开发者版本入口  微信小程序 wx.uploadFile无法上传解决办法  如何自定义建站之星网站的导航菜单样式？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何快速搭建自助建站会员专属系统？  个人摄影网站制作流程,摄影爱好者都去什么网站？  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  *服务器网站为何频现安全漏洞？  php485函数参数是什么意思_php485各参数详细说明【介绍】  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  如何在景安云服务器上绑定域名并配置虚拟主机？  黑客如何利用漏洞与弱口令入侵网站服务器？  Laravel Session怎么存储_Laravel Session驱动配置详解  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  成都网站制作公司哪家好,四川省职工服务网是做什么用？  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  如何快速搭建安全的FTP站点？  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  教你用AI将一段旋律扩展成一首完整的曲子  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  如何快速生成橙子建站落地页链接？  Laravel如何自定义分页视图？（Pagination示例）  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  移动端脚本框架Hammer.js  使用C语言编写圣诞表白程序  Android自定义listview布局实现上拉加载下拉刷新功能  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  如何在腾讯云服务器快速搭建个人网站？  JavaScript如何实现继承_有哪些常用方法  香港服务器WordPress建站指南：SEO优化与高效部署策略  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  Laravel如何为API编写文档_Laravel API文档生成与维护方法  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  iOS发送验证码倒计时应用  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  Laravel用户密码怎么加密_Laravel Hash门面使用教程  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  html5的keygen标签为什么废弃_替代方案说明【解答】  如何在搬瓦工VPS快速搭建网站？