ワークスペース設定、タスクランナー、拡張機能… Visual Studio Code で tsconfig ファイルを複数使用する賢い方法

2024-05-23

Visual Studio Code で複数の tsconfig ファイルを使用する方法

サブディレクトリごとに tsconfig.json を配置する

最も基本的な方法は、サブディレクトリごとに tsconfig.json ファイルを配置 する方法です。各ディレクトリの tsconfig.json ファイルには、そのディレクトリに特有の設定を記述します。

例：

# 根ディレクトリの tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "include": [
    "src/**/*.ts"
  ]
}

# src/lib ディレクトリの tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "lib": ["dom"]
  }
}

# src/components ディレクトリの tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

この例では、根ディレクトリの tsconfig.json ファイルでベースとなる設定を定義し、各サブディレクトリの tsconfig.json ファイルで extends オプションを使用して継承しています。継承された tsconfig.json ファイルは、ベースとなる設定を 上書き することができます。

include/exclude オプションでファイルを絞り込む

サブディレクトリごとに tsconfig.json ファイルを配置する方法に加え、include と exclude オプションを使用して、コンパイル対象となるファイルを絞り込むこともできます。

# tsconfig.json
{
  "compilerOptions": {
    /* ... */
  },
  "include": [
    "src/**/*.ts",
    "!src/lib/test/**/*.ts"  // 特定のディレクトリを除外
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"  // テストファイルを除外
  ]
}

この例では、include オプションで src ディレクトリ以下にある全ての TypeScript ファイルをコンパイル対象とし、exclude オプションで node_modules ディレクトリと *.spec.ts ファイルを除外しています。

references オプションで複数の tsconfig.json ファイルを合成する

references オプションを使用すると、複数の tsconfig.json ファイルの設定を合成することができます。これにより、重複する設定を減らし、コードの保守性を向上させることができます。

# tsconfig.json
{
  "compilerOptions": {
    /* ... */
  },
  "references": [
    "tsconfig.lib.json",
    "tsconfig.components.json"
  ]
}

# tsconfig.lib.json
{
  "compilerOptions": {
    "lib": ["dom"]
  }
}

# tsconfig.components.json
{
  "compilerOptions": {
    "jsx": "react"
  }
}

この例では、references オプションで tsconfig.lib.json と tsconfig.components.json ファイルを合成しています。これにより、tsconfig.json ファイルで定義された設定に加え、tsconfig.lib.json と tsconfig.components.json で定義された設定も適用されます。

composite オプションで複数の tsconfig.json ファイルを統合する

composite オプションは、references オプションと似ていますが、より高度な機能を提供します。 composite オプションを使用すると、複数の tsconfig.json ファイルの設定を統合し、単一の tsconfig.json ファイル として扱うことができます。

# tsconfig.json
{
  "compilerOptions": {
    /* ... */
  },
  "composite": true,
  "include": ["**/*.ts"]
}

# tsconfig.lib.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "lib": ["dom"]
  }
}

# tsconfig.components.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "jsx": "react"

Visual Studio Code で複数の tsconfig ファイルを使用する：サンプルコード

ディレクトリ構造

project
├── src
│   ├── lib
│   │   ├── index.ts
│   │   └── tsconfig.lib.json
│   ├── components
│   │   ├── button.ts
│   │   └── tsconfig.components.json
│   └── tsconfig.json
└── tsconfig.vscode.json

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "include": [
    "src/**/*.ts"
  ],
  "references": [
    "tsconfig.lib.json",
    "tsconfig.components.json"
  ]
}

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "lib": ["dom"]
  }
}

tsconfig.components.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

{
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}

説明

tsconfig.json は、プロジェクト全体のベースとなる設定を定義します。
tsconfig.lib.json は、src/lib ディレクトリに特有の設定を定義します。
tsconfig.vscode.json は、Visual Studio Code 拡張機能用の設定を定義します。

この例では、tsconfig.json ファイルで references オプションを使用して、tsconfig.lib.json と tsconfig.components.json ファイルの設定を継承しています。これにより、各ディレクトリに特有の設定を個別に管理することができます。

補足

上記のコードはあくまで一例です。プロジェクトの規模や要件に合わせて、設定を調整する必要があります。
Visual Studio Code で複数の tsconfig ファイルを使用するには、tsconfig.json ファイルのパスをプロジェクト設定で指定する必要があります。詳細については、Visual Studio Code のドキュメントを参照してください。

Visual Studio Code で複数の tsconfig ファイルを使用する：その他の方法

ワークスペース設定を使用する

Visual Studio Code のワークスペース設定を使用して、複数の tsconfig ファイルを指定することができます。

方法：

Code メニューを開き、Preferences または Settings を選択します。
JavaScript > TypeScript を選択します。
TypeScript: Workspace Root 設定に、プロジェクトのルートディレクトリを指定します。
TypeScript: Compile On Save 設定を On に切り替えます。

この設定を有効にすると、Visual Studio Code はワークスペース内のすべての tsconfig.json ファイルを自動的に検出し、コンパイルとファイル監視を行います。

タスクランナーを使用する

Gulp や Grunt などのタスクランナーを使用して、複数の tsconfig ファイルを対象としたコンパイルタスクを定義することができます。

// gulpfile.js
const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsConfig = require('gulp-tsconfig-paths');

gulp.task('compile', function() {
  const tsProject = ts.createProject('tsconfig.json');
  return tsProject.src()
    .pipe(tsConfig())
    .pipe(tsProject())
    .pipe(gulp.dest('dist'));
});