如何在Visual Studio Code中对别名路径使用Ctrl+点击跳转功能

原生实现（无需额外扩展） #

VSCode原生就支持路径别名跳转，仅需在项目根目录添加对应配置文件即可：

• 若为JS项目，根目录新建jsconfig.json；若为TS项目，直接修改根目录的tsconfig.json
• 配置内容参考如下，paths字段需要和你vue.config.js中的alias规则完全对齐：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // 示例：别名@指向src目录，按你的实际别名规则修改
      "@/*": ["src/*"],
      "code/*": ["./code/*"]
    }
  },
  "include": ["src/**/*", "code/**/*", "**/*.vue"]
}

配置保存后，按Ctrl+Shift+P执行「Reload Window」重载VSCode窗口，即可直接Ctrl+点击别名路径跳转。

扩展适配方案 #

如果不想手动添加配置文件，可以安装对应扩展自动适配：

• Vue项目优先安装官方扩展 Volar（扩展ID：Vue.volar），自动读取vue.config.js/vite.config.js中的别名规则，无需额外配置即可支持跳转，比旧版Vetur扩展适配性更好。
• 通用项目可安装 别名路径跳转 扩展（扩展ID：aliyun.skali），自动识别各类构建工具配置文件中的别名规则，支持绝大多数前端项目的别名跳转需求。

注意：如果配置后仍无法跳转，确认以下几点：

1. 配置文件放在VSCode打开的项目根目录，而非子文件夹内
2. paths字段的别名规则和构建工具配置中的别名完全一致
3. 配置修改后重载VSCode窗口生效

内容的提问来源于stack exchange，提问作者The Apprentice