VSCode上で複数のtsconfigを適用させるプラクティス
VSCodeではTypeScriptファイルの配置されている階層からルートディレクトリまで辿って、見つかったtsconfig.json
をそのファイルのパースに使用します。(ref)
使用されているtsconfig.json
はステータスバーから確認出来ます。
またreferencesで参照されたtsconfigにマッチする場合はそのtsconfigが使用されます。
単一のtsconfig設定で問題なければルート階層にtsconfig.json
を配置すれば問題ありませんが、ファイルによって適用させたいtsconfigを分岐したい場合は、
- サブディレクトリに
tsconfig.json
を置く - include/excludeでフィルタしたtsconfigを作成し、references・compositeで合成する
のいずれかで実現出来ます。
以下アプリケーションコードとテストコードで別のtsconfigを適用させたいケースで例示します。
手元で確認したい場合はこちらのリポジトリをクローン・参照してください。
tsconfig.json
を置く
サブディレクトリにサブディレクトリにtsconfig.json
を置けば、そのディレクトリ内のファイルはそのtsconfig.json
を参照します。
src/
index.ts
test/
index.test.ts
tsconfig.json // テストコード用
tsconfig.json // アプリケーションコード用
{
"compilerOptions": {
...
},
"include": ["src/**/*"]
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
...
},
"include": ["./**/*"]
}
ここではテストコード用tsconfig.json
がアプリケーションコード用tsconfig.json
をextendsしていますが、これは参照の条件には関係ないので単純に設定を流用したいかどうかで構いません。
ただしextendsした場合はアプリケーションコード用のincludeが適用されてテストコードが含まれないため、**/*
で上書きしています。
この状態でテストコード(test/index.test.ts)を開くとテストコード用のtsconfig.json
が適用されていることが確認出来ます。
またこのルールを考慮すると必ずしもルート階層にtsconfig.json
を置かずに、ディレクトリ毎に置くことも可能です。
src/
index.ts
tsconfig.json // アプリケーションコード用
test/
index.test.ts
tsconfig.json // テストコード用
include/excludeでフィルタしたtsconfigを作成し、references・compositeで合成する
アプリケーションコード用のtsconfig.json
とテストコード用のtsconfig.test.json
を作成しreferencesで参照します。
こちらの方法は前述のように対象コードがディレクトリで分割されていない構成でも可能です。
src/
index.ts
index.test.ts
tsconfig.json // アプリケーションコード用
tsconfig.test.json // テストコード用
{
"compilerOptions": {
...
},
"include": ["src/**/*"],
"exclude": ["src/**/*.test.ts"],
"references": [
{
"path": "tsconfig.test.json"
}
]
}
{
"extends": "./tsconfig.json",
"compilerOptions": {
...
"composite": true
},
"include": ["src/**/*.test.ts"],
"exclude": []
}
こちらもテストコード用tsconfig.test.json
がアプリケーションコード用tsconfig.json
をextendsしているため、includeとexcludeを上書きしています。
この例ではルートのtsconfig.json
をアプリケーション用にしていますが、ファイル名から意図を明確にしたい場合はたとえばtsconfig.app.json
にしてルートのtsconfig.json
でreferencesしても問題ありません。(Solution Styleと呼ばれます)
{
"files": [],
"references": [
{
"path": "tsconfig.app.json"
},
{
"path": "tsconfig.test.json"
}
]
}
{
"compilerOptions": {
...
},
"include": ["src/**/*"],
"exclude": ["src/**/*.test.ts"]
}
{
"compilerOptions": {
...
},
"include": ["src/**/*.test.ts"]
}
IDE用とコンパイル用で分ける
ここまではコードの種類によってtsconfigを分けていましたが、他のケースとしてコンパイル対象をフィルタするためにtsconfigを分けたい場面があります。
(たとえばコンパイル対象からテストコードやstorybookのコードを除外したい等)
その場合は前述のパターンでtsconfigを分けた上で、コンパイル用のtsconfig.build.json
のようなtsconfigを作ります。
src/
AppButton.tsx
AppButton.stories.tsx
AppButton.test.ts
tsconfig.json // IDE用(referencesでappとtestを含める)
tsconfig.app.json // アプリケーション用
tsconfig.test.json // テスト用
tsconfig.build.json // コンパイル用
{
"extends": "./tsconfig.app.json",
"exclude": ["src/**/*.stories.tsx", "src/**/*.test.ts"]
}
tsc -p tsconfig.build.json
まとめ
複数のtsconfigを適用させる場合は、
- サブディレクトリに
tsconfig.json
を置く - include/excludeでフィルタしたtsconfigを作成し、references・compositeで合成する
- コンパイル用に分けたい場合はさらにコンパイル用の
tsconfig.build.json
を作成する
Discussion