VS Code で複数の tsconfig を使う方法

TypeScript プロジェクトが大きくなると、1 つの tsconfig.json ファイルでは管理が難しくなることがあります。複数の tsconfig.json ファイルを使用することで、プロジェクトを複数のサブプロジェクトに分割し、異なる設定を適用することができます。

基本的な手順

1. プロジェクト構造の計画
   

   • プロジェクトを論理的なサブプロジェクトに分割します。
   • 各サブプロジェクトに独自の tsconfig.json ファイルを作成します。

2. 親 tsconfig.json ファイルの作成
   

   • プロジェクトのルートディレクトリに tsconfig.json ファイルを作成します。
   • このファイルは、他の tsconfig.json ファイルのベースとして機能します。
   • 必要な共通の設定（コンパイラオプション、インクルード/エクスクルートパターンなど）をここに定義します。
3. • extends プロパティを使用して、親 tsconfig.json ファイルを継承します。
   • サブプロジェクト固有の設定をオーバーライドまたは追加します。

例

// 親 tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

// 子 tsconfig.server.json
{
  "extends": "./tsconfig.json",
  "include": ["src/server/**/*"]
}

// 子 tsconfig.client.json
{
  "extends": "./tsconfig.json",
  "include": ["src/client/**/*"]
}

VS Code の設定

1. ワークスペースの設定
   

   • VS Code でプロジェクトのルートディレクトリを開きます。
   • ファイル > ワークスペースの保存 を選択して、ワークスペースを作成します。

2. 設定の編集
   

   • ファイル > 基本設定 > ワークスペース設定 を選択します。
   • TypeScript: TSConfig.json File 設定を編集します。
   • 複数の tsconfig.json ファイルのパスをカンマで区切って入力します。

重要なポイント

• 複雑なプロジェクトでは、複数の tsconfig.json ファイルを使用することで、より柔軟な設定が可能になります。
• 適切なインクルード/エクスクルートパターンを設定して、各 tsconfig.json ファイルが適切なファイルセットを対象とするようにします。
• 親 tsconfig.json ファイルは、子ファイルのベースとして機能します。子ファイルは、親ファイルの設定を継承し、オーバーライドすることができます。
• 複数の tsconfig.json ファイルを使用する場合、VS Code は各ファイルの設定を個別に適用します。

注意

• 常に最新の情報を確認し、ベストプラクティスに従ってください。
• 具体的な設定はプロジェクトの要件に合わせて調整してください。
• この説明は基本的な手順であり、プロジェクトの規模や複雑さによって異なるアプローチが必要となる場合があります。

プロジェクトのディレクトリ構造

my-project/
├── tsconfig.json
├── src/
│   ├── server/
│   │   ├── index.ts
│   │   └── utils.ts
│   └── client/
│       ├── index.ts
│       └── components/
│           └── Button.tsx

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

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

{
  "extends": "./tsconfig.json",
  "include": ["src/client/**/*"]
}

1. • 以下の値を入力します:

   "typescript.tsconfig.json": [
       "tsconfig.json",
       "tsconfig.server.json",
       "tsconfig.client.json"
   ]
   

説明

• • ワークスペースの設定で、複数の tsconfig.json ファイルを指定します。
  • VS Code は、これらのファイルに基づいて、各ファイルの型チェックやコード補完などの機能を提供します。
• • include プロパティで、各サブプロジェクトのファイルの範囲を指定します。
• • プロジェクト全体の共通設定を定義します。
  • include プロパティで、TypeScript コンパイラがチェックするファイルの範囲を指定します。

• VS Code の設定で、複数の tsconfig.json ファイルを正しく指定しないと、意図した動作にならないことがあります。
• 適切な include と exclude プロパティを設定して、コンパイル対象のファイルを正確に指定してください。
• 複数の tsconfig.json ファイルを使用することで、プロジェクトをよりモジュール化し、管理しやすくなります。

ワークスペースの設定 (推奨)

これは最も一般的な方法であり、VS Code のワークスペース設定を使用して複数の tsconfig.json ファイルを指定します。これにより、VS Code は各ファイルの設定を個別に認識し、適切な言語サービスを提供します。

baseUrl プロパティの使用

baseUrl プロパティを使用して、TypeScript コンパイラに複数の tsconfig.json ファイルの場所を指定することができます。ただし、この方法では、VS Code の言語サービスが正しく機能しない可能性があります。

npm scripts の利用

npm scripts を使用して、異なる tsconfig.json ファイルを指定して TypeScript コンパイラを実行することができます。ただし、これはビルドプロセスの一部としてのみ有効であり、VS Code の言語サービスには影響しません。

各方法の比較

推奨される方法

ワークスペース設定を使用する方法が最も推奨されます。この方法により、VS Code の言語サービスが適切に機能し、開発効率が向上します。

• 複数の tsconfig.json ファイルを使用する際には、プロジェクトの構造と要件に合わせて適切な設定を行うことが重要です。