如何在 vs-code 中使用多个 tsconfig 文件？

Question

我正在使用 Visual Studio 代码并且有一个相当通用的项目结构：

├── client/
│   ├── tsconfig.json
├── shared/
├── server/
│   ├── tsconfig.json
├── project.json

这两个 tsconfig 文件有不同的设置（例如 client/ 下的目标 ES5，server/ 下的目标 ES6）。注意根目录下没有tsconfig。

问题是我希望共享目录包含在两个项目中。我无法使用 tsconfig 执行此操作，因为 exclude 选项不允许我包含比 tsconfig.json 更高目录中的文件夹，并且使用 files 我必须不断保持文件列表是最新的，因为它不支持 globs。

请注意，我可以通过将共享文件夹添加到 tsc 来编译得很好，我想要的是 Visual Studio 代码 IDE 识别智能感知等的共享代码

等待filesGlob是唯一的选择吗？

Answer 1

VSCode 的新版本支持 Typescript 2，在 tsconfig.json 中使用 include 选项增加了对 globs 的支持。参见 http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 2

我在这里回答：

答案要点：

您可以通过扩展基础 tsconfig.json 文件来做到这一点：

tsconfig extension

只是不要排除基础 tsconfig.json 中的目录，打字稿应该能够为您解析您的打字（使用 node_modules/@types 或打字模块知道这是真的）

例如：

configs/base.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

tsconfig.json:

{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

tsconfig.nostrictnull.json:

{
   "extends": "./tsconfig",
   "compilerOptions": {
     "strictNullChecks": false
   }
}

Answer 3

作为另一种变体，将 npm 命令与下一个 运行:

绑定

{
   'start': '...',
   'buildFront': 'tsc -p tsconfig.someName.json'
}

Answer 4

现在更容易了，因为 vscode 对此有更好的支持。

您可以使用此目录结构，因此所有代码都是独立的：

├── frontend/
│   ├── src/
│   │   ├── <frontend code>
│   ├── package.json
│   ├── tsconfig.json
├── shared/
│   ├── package.json
├── backend/
│   ├── src/
│   │   ├── <backend code>
│   ├── package.json
│   ├── tsconfig.json

然后在后端和前端tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "~shared/*": ["../shared/*"]
    },
    "rootDirs": [
      "./src",
      "../shared"
    ]
  }
}

允许访问共享代码，例如：

import { Foo } from '~shared/foo';

---

旧答案

对根使用单个 tsconfig.json。然后为每个项目扩展它（后端 tsconfig.server.json、前端 tsconfig.webpack.json）。

• Root tsconfig.json include: ['src'] 以确保所有文件在 IDE
中得到类型检查
• 后端tsconfig.server.jsonexclude: ['src/app']前端文件
• 前端：tsconfig.webpack.json exclude: ['src/server'] 后端文件

文件夹结构

├── src/
│   ├── app/    < Frontend
│   ├── server/ < Backend
│   ├── common/ < Shared
├── tsconfig.json
├── tsconfig.server.json
├── tsconfig.webpack.json

配置文件

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "src"
  ]
}

tsconfig.webpack.json

{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/app"
  ]
}

tsconfig.server.json

{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/server"
  ]
}

更多

Example lesson

Answer 5

正如其他人所提到的，如果前端和后端具有不同的类型，则现有答案无法解决问题——几乎在所有情况下都是如此，因为前端代码支持 dom 而后端代码一般不会。

拥有顶级 tsconfig.json 意味着 dom 代码将在前端代码中显示为错误（如果 dom 是一个库）或 dom 代码将允许在后端代码中使用（如果 dom 被省略）。

这是一个可行的解决方案：

文件夹结构

我们的项目往往 'backend by default' 具有用于前端代码的特定文件夹。

├── src/
│   ├── frontend/ < Frontend
│   │     ├── `tsconfig.json` (extends frontend framework defaults, eg Svelte)
│   ├── http/ < Backend
│   ├── events/ < Backend
├── tsconfig.json `tsconfig.json` (backend tsconfig)

后端tsconfig.json

这通常是相当小的。我们使用 jest 进行测试，es2019 JS 标准库。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "outDir": "dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["es2019"],    
    "types": ["jest"],
  },
  "exclude": [
    "node_modules",
    "public/*",
    "src/frontend/*"
  ],
  "include": ["src/**/*"]
}

前端tsconfig.json

这适用于 Svelte，但在旧框架中的工作方式类似。前端有不同的类型，因为它支持 .svelte 文件和 dom

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    // Default included above is es2017
    "target": "es2019",
  },
  "lib": ["es2019", "dom"],
}

前端特定工具

使汇总使用单独的 tsconfig 文件：

export default {
  input: ...
  output: ...
  plugins: [
    ...
    typescript({
      tsconfig: "src/frontend/tsconfig.json",
      sourceMap: isDevelopment,
      inlineSources: isDevelopment,
    }),
    ...
  ],
   ...
};