VSCode中从项目根目录解析Jest全局TypeScript类型的方法

当你在VSCode中打开根目录my-project时，编辑器默认会从根目录查找类型定义和配置文件，不会自动识别子项目的依赖。以下几种方法可以解决这个问题，无需在根目录安装额外依赖：

1. 根目录添加多项目TypeScript配置 #

在根目录创建tsconfig.json，通过projects字段关联所有子项目的TypeScript配置文件：

{
  "compilerOptions": {
    // 可选：添加基础编译配置，比如target、module等
  },
  "projects": ["./client/tsconfig.json", "./server/tsconfig.json"]
}

同时确保每个子项目的tsconfig.json中已明确指定Jest类型：

{
  "compilerOptions": {
    "types": ["jest"]
  }
}

这样VSCode会加载每个子项目的配置，自动识别对应的Jest全局类型。

2. 配置VSCode工作区设置 #

在根目录的.vscode/settings.json中添加以下配置，让编辑器优先识别子项目的依赖和类型：

{
  "typescript.preferences.includePackageJsonAutoImports": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

如果使用pnpm/yarn等包管理器，还可以指定包管理器路径，确保VSCode能找到子项目的依赖：

{
  "npm.packageManager": "pnpm"
}

3. 添加全局类型引用文件 #

在根目录创建typings/jest.d.ts文件，内容如下：

/// <reference types="jest" />

然后在每个子项目的tsconfig.json中添加这个文件到include数组：

{
  "include": ["**/*", "../typings/jest.d.ts"]
}

这个方法通过显式引用子项目中已安装的@types/jest类型，让VSCode在根目录打开时也能识别全局Jest方法。

4. 单独指定子项目的TypeScript配置 #

如果你不想在根目录创建tsconfig，可以在VSCode的工作区设置中，为每个子目录单独指定tsconfig路径：

{
  "typescript.tsconfigPathForWorkspaceFolder": {
    "/my-project/client": "./client/tsconfig.json",
    "/my-project/server": "./server/tsconfig.json"
  }
}

这样VSCode会针对不同的子目录加载对应的配置文件，从而识别Jest类型。

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