🐥

tsconfig.eslint.jsonはどんな役割のファイルなのか?

2022/05/04に公開約1,800字

概要

個人開発をしていて、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:

https://typescript-eslint.io/docs/linting/monorepo

ざっくり意訳します。

もし、すべてのファイルがincludeされていなければ、当然ですがそれらにlintをあてることはできません。この場合、2つの選択肢があります。includeに追加するか、新しいコンフィグファイルを作成するかです。
前者は複雑なビルドの場合、includeするパスを増やしてしまうとビルドが壊れる可能性があるため、必ずしもすべての人に通用する手法とは限りません。そのような場合は、次のようなtsconfig.eslint.jsonという新しい設定ファイルを作成することをおすすめします。

つまり、tsconfig.eslint.jsonは、「TypeScriptを使ううえでlintをどのファイルにまで適用すればいいのか」を管理するファイルですね。
このようにしないと、複雑なビルドの場合はこける可能性があるのだそうです。

なのでこのファイルには、lintをあてる必要のあるファイルをincludeとして指定し、includeしたものの中で特別除きたいものはexcludeとして指定すればOKです。

併せて、公式で紹介されていた設定内容を記載しておきます。

tsconfig.eslint.json
{
  "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

ログインするとコメントできます