tsconfig.eslint.jsonはどんな役割のファイルなのか？
概要
個人開発をしていて、tsconfig.eslint.jsonに修正を加えようとしたのですが・・・
自分はなあなあで開発しちゃう愚か者なので、「そういえば、こやつの役割を自分は知らないな😇」となりました。
その結果ほんの少し調べたことを記事に残します。
誤っている箇所があれば、ご指摘いただけますと幸いです🙏
結論
公式に書いてありました。
If it doesn't include all of your files, then we won't be able to lint them. In this instance, you have two options: add them in to the include, or create a new config.
The former doesn't always work for everyone if they've got a complex build, as adding more paths (like test paths) to include could break the build. In those cases we suggest creating a new config called tsconfig.eslint.json, that looks something like this:
ざっくり意訳します。
もし、すべてのファイルがincludeされていなければ、当然ですがそれらにlintをあてることはできません。この場合、2つの選択肢があります。includeに追加するか、新しいコンフィグファイルを作成するかです。
前者は複雑なビルドの場合、includeするパスを増やしてしまうとビルドが壊れる可能性があるため、必ずしもすべての人に通用する手法とは限りません。そのような場合は、次のようなtsconfig.eslint.jsonという新しい設定ファイルを作成することをおすすめします。
つまり、tsconfig.eslint.jsonは、「TypeScriptを使ううえでlintをどのファイルにまで適用すればいいのか」を管理するファイルですね。
このようにしないと、複雑なビルドの場合はこける可能性があるのだそうです。
なのでこのファイルには、lintをあてる必要のあるファイルをincludeとして指定し、includeしたものの中で特別除きたいものはexcludeとして指定すればOKです。
併せて、公式で紹介されていた設定内容を記載しておきます。
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": true
},
"include": [
"src",
"test",
"tools"
]
}
extendsで、tsconfig.jsonから拡張したファイルだよーというのを示してします。
また、compilerOptions/noEmitで、コンパイル結果の出力をさせないようにしています。
これはtsconfig.json本体だとあまり触らない設定と思いますが、ESLintではTypeScript -> JavaScriptのコンパイル結果は必要ないので、OFFにしているのでしょう。
おまけ
ここまでは調べられなかったので、あくまで推測なのですが・・・
ビルドが複雑だと、tsconfig.jsonだけの場合にこける可能性があるのは、たとえば以下のケースがあるのかもしれません。
- lintをあてたいだけのJavaScriptファイルを、tsconfigの適用範囲に入れてしまい、不具合が発生する
- 単純にtsconfigの適用範囲が広がりすぎて、ビルドに負荷がかかる
所感
ピンポイントで、「tsconfig.eslint.jsonってなんなんだっけ？」という疑問を持った方のお役に立てれば幸いです😇
Discussion