1. ホーム
  2. typescript

[解決済み] vs-codeで複数のtsconfigファイルを使用するには?

2023-02-21 04:35:07

質問

私はVisual Studio Codeを使用しており、かなり一般的なプロジェクト構造を持っています。

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

2つのtsconfigファイルはそれぞれ異なる設定になっています(例えば client/ の下にあるものは ES5 をターゲットにしています。 server/ の下にあるものはES6をターゲットにしています)。ルートディレクトリにはtsconfigがないことに注意してください。

問題は、共有ディレクトリが両方のプロジェクトに含まれるようにしたいことです。tsconfigを使用してこれを行うことはできません。 exclude オプションは、tsconfig.jsonよりも上位のディレクトリにあるフォルダを含めることを許可しないので、tsconfigを使用してこれを行うことはできません。 files グロブをサポートしていないので、常にファイルのリストを最新に保つ必要があります。

私が欲しいのは Visual Studio Code IDE がインテリセンスなどのために共有コードを認識することです。

を待つしかないのでしょうか。 ファイル グロブ ?

どのように解決するのですか?

最近では、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 ).

  • ルート tsconfig.json include: ['src'] すべてのファイルが IDE でタイプチェックされるようにするために
  • バックエンド tsconfig.server.json exclude: ['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"
  ]
}

もっと見る

レッスン例