ディレクトリ配下にのみ、eslintのルールを適用する
TL;DR
対象のディレクトリに.eslintrcを置くことで、そのディレクトリ配下にのみルールを適用できます。
以下の例ではsubディレクトリに.eslintrc.js を追加しています。
このルールはsubディレクトリ配下のファイルにのみ適用されます。
.
├── .eslintrc.js
├── a.js
└── sub
├── .eslintrc.js //⭐️ subディレクトリにのみ適用されるルール
└── b.js
仕組み
これはeslintのルール設定はカスケードされるためです。
lint対象のファイルのディレクトリを起点に、
- 設定ファイルを探し、見つかればマージする
- 上のディレクトリに移動する
をルートディレクトリかroot:true が書かれた設定ファイルのあるディレクトリに到達するまで繰り返し、対象のファイルに適用する設定ファイルを作成します。
設定が競合した場合は下の階層にある設定ファイルが優先されます。
例えば、以下の例ではC.jsに 適用されるルールはroot:true の.eslintrc.jsがあるところまで、各階層の設定をマージしたものが適用されます。
言葉で説明すると、ややこしく感じますが、要は子ディレクトリに設定ファイルを置けば、上書きできるよってことです！
リアーキテクトに便利
さて、このディレクトリへのルール適用は、プロジェクトのリアーキテクトで新規にeslintルールを追加したい場合に便利です。
以下のように、new_architectureディレクトリを作って、古いコードをリファクタリングしながら、そのディレクトリに移していく場合を考えます。
このリアーキテクト後のディレクトリに、何か新しいESLintのルールを追加することになりました。
以前の自分であれば、
- ルートの.eslintrc.jsにルールを追加
- lintエラーになった箇所に、
TODO+disableをつけていく。
という方法で、追加していました。
しかし、この方法だと、リアーキテクト前の古いコードに大量にエラーが出ることが多く、いちいちdisable にするのもかなり手間でした。
ここで便利なのが、サブディレクトリへの設定ファイル配置です。
new_architecture/.eslintrc.js を作って、リアーキテクト後のディレクトリのみにルールが適用されます。
こうすることで、
- 古いコードにいちいち
disableをつけなくて済む - 古いコードを
new_architecture配下に移すと、lint対象となるのでエラーになってくれる。
ので、見事にリアーキテクト後のコードにだけルールが適用されます🎉
こういうシチュエーションは、結構あると思うので覚えておくと便利です💡
Discussion