如何在 vs-code 中使用多个 tsconfig 文件? [英] How to use multiple tsconfig files in vs-code?

问题描述

我使用的是 Visual Studio Code 并且有一个相当常见的项目结构:

I am using Visual Studio Code and have a fairly common project structure:

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

这两个 tsconfig 文件有不同的设置(例如 client/ 下的一个针对 ES5，server/ 下的一个针对 ES6).注意根目录下没有tsconfig.

The two tsconfig files have different settings (e.g. the one under client/ targets ES5, the one under server/ targets ES6). Note that there is no tsconfig in the root directory.

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

The problem is that I want the shared directory to be included in both projects. I can't do this using tsconfig because the exclude option won't let me include a folder that is in a higher directory than the tsconfig.json, and using files I have to constantly keep the list of files up to date as it doesn't support globs.

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

Note that I can compile fine by adding the shared folder into tsc, what I want is for the Visual Studio Code IDE to recognise the shared code for intellisense etc.

是等待 filesGlob 的唯一选择吗?

Is the only option to wait for filesGlob?

推荐答案

如今，由于 vscode 对此提供了更好的支持，因此变得容易多了.

These days it is much easier as vscode has better support for this.

你可以使用这个目录结构，这样所有的代码都是独立的:

You can use this directory structure so all the code is independent:

├── 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"
    ]
  }
}

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

To allow access to the shared code e.g.:

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

---

旧答案

使用单个 tsconfig.json 作为根.然后为每个项目扩展它(后端tsconfig.server.json，前端tsconfig.webpack.json).

---

Old Answer

Use a single tsconfig.json for the root. And then extend it for each project (backend tsconfig.server.json, frontend tsconfig.webpack.json).

• Root tsconfig.json include: ['src'] 确保所有文件都在 IDE 中进行类型检查
• 后端 tsconfig.server.json exclude: ['src/app'] 前端文件
• 前端:tsconfig.webpack.json 排除:['src/server'] 后端文件

• Root tsconfig.json include: ['src'] to ensure all files get typechecked in the IDE
• Backend tsconfig.server.json exclude: ['src/app'] the frontend files
• Frontend : tsconfig.webpack.json exclude: ['src/server'] the backend files

├── 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"
  ]
}

更多

示例课程

这篇关于如何在 vs-code 中使用多个 tsconfig 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！