巨大なコードベースに対して段階的に新しい ESLint rule を導入する

背景

  • 既存の巨大なコードベースに対して新しい ESLint rule を導入したいことがある
    • ESLint を導入した段階では厳しすぎて OFF にしていたけど、やっぱり便利なので ON にしたい、みたいなケース
    • 例えば @typescript-eslint/no-floating-promises とか
  • しかし既存のコードベースはそのルールに従っていないため、ON にすると大量に lint エラーが出てしまう
    • 例えば数百件とか
  • 手で修正するのは現実的ではない、eslint --fix で修正できる rule でもない、けど便利な rule なので有効化したい
    • さてどうしよう

解決策

以前このブログでも紹介した eslint-interactive というツールに、lint エラーが出ている行に一括で // eslint-disable-next-line xxx を挿入する機能があります。これを使うと、ひとまず既存のコードでは該当 rule は無視して、新規のコードでは rule を有効化する、といったことが簡単に実現できます。
eslint-interactive とは何か、については以前記事を書いたので是非そちらをお読み下さい。
使ってみてね。

補足: suppress-eslint-errors との違いについて

同等の機能を持ったツールに suppress-eslint-errors というものがあって、これでも全く同じことができます。
じゃあ何で eslint-interactive 側に rule を無効化する機能を追加したかというと、良いユーザ体験を提供したかったからです。元々 eslint-interactive にはコードベース中の lint エラーを見やすくまとめてくれる機能があったり、rule ごとに eslint --fix できる機能があって、それと一緒になっていたほうが何かとユーザ的には嬉しいだろう、みたいな狙いがあります。1つのツールで完結する嬉しさを実現したかった。

2021/9/8 追記

v2.0.0 をリリースして、 suggestion *1 も機械的に適用できるようになりました。