VS Code中如何让Ctrl+Click跳转到npm链接包的源码文件？

我在VS Code里打开的仓库结构是这样的：

D webapp
    D src
        F index.ts
    F package.json
D packages
    D validation
        D src
            F validation.ts
        F package.json

webapp是个Node项目，通过执行 cd webapp && npm install ../packages/validation 引入本地的validation包使用。

validation包的源码文件packages/validation/src/validation.ts内容如下：

export function validate(schema: Schema, object: any): ValidationError[] {
    // validation logic...
}

在webapp/src/index.ts中调用该函数的代码：

import { validate } from 'validation';

const errors = validate(schema, object);

现在的问题是：按下Ctrl+Click点击validate函数时，VS Code总是跳转到node_modules/validation/dist/validation.d.ts，有没有办法让它直接跳转到真实的源码文件packages/validation/src/validation.ts？

解决办法 #

1. 修改validation包的package.json（最省心） #

直接在packages/validation/package.json里，将类型入口指向源码文件：

{
  "name": "validation",
  "main": "dist/validation.js",
  "types": "src/validation.ts" // 替换原来指向dist的路径为源码路径
}

这样TypeScript会直接把源码当作类型定义文件，Ctrl+Click自然就会跳转到源码。

2. 给webapp的tsconfig添加paths映射 #

在webapp/tsconfig.json的compilerOptions中添加paths配置，将validation包映射到本地源码：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "validation": ["../packages/validation/src/validation.ts"]
    }
  }
}

这种方式只会影响VS Code的代码解析和跳转逻辑，不会干扰项目构建时的模块查找。

3. 用npm link替代本地安装 #

先进入packages/validation目录执行：

npm link

再进入webapp目录执行：

npm link validation

npm link会给node_modules/validation创建指向本地源码的软链接，VS Code就能直接识别到源码文件，跳转时就会指向packages/validation/src/validation.ts。
注意：使用该方法时，建议确保validation的package.json里的types或main配置能正确指向源码，或者你的TypeScript配置已支持处理源码文件。

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