要約

eslint-todo-generator を導入しよう

困りごと

eslintをプロジェクトの途中から導入したり、運用していく中でルールを途中から変更するとなったときに、指摘箇所が多くて適用しにくい、できないということはありませんか?

eslintは優秀なので eslint --fixで規則的な構文は人が手を動かさなくても修正することが可能です

しかし、autofixには稀にバグが潜んでいて意図しない挙動になることもないとは言い切れません
参考: ESLintの--fixはソースを破壊する！本当？？ - Qiita

※ サービスのQAチームが優秀だったり、テストコードがちゃんと整備されているプロジェクトでautofixすることは怖くないというチームはどんどんautofixして行きましょう!

対処方法

ファイル単位で指摘が発生しているルールのみをignoreしたいなぁ

できるよ eslint-todo-generator ならね

使い方

$ npm i --save-dev eslint-todo-generator
$ npx eslint-todo-generator -f json 'src/**/*'

.eslintrc-todo.json が生成されるのでそれを以下のように .eslintrc.json にルールとして追加しましょう

..eslintrc.json

{
  ...
  "extends": [
    "eslint:recommended",
    ".eslintrc-todo.json"
  ]
}

運用方法

このツールを入れることで、多量の既存エラーをignoreすることができました。そのため、新しく作成したファイルや既存のファイルで新たに発生したlintエラーはしっかりとeslintで発見することができます。

既存の指摘箇所をどうしていくかですが、エイヤしてよいファイルであればtodoファイルから削除して、eslint --fix を実行しましょう
eslint --fixが不安な場合などは、todoからファイル名を探して、特定のルールを削除することで小さく修正していくことが可能です

todoファイルの中身は以下のような構造になっています

..eslintrc-todo.json

{
  "overrides": [
    {
      "rules": {
        "arrow-parens": "off",
        "comma-dangle": "off",
        "eol-last": "off",
        "padded-blocks": "off",
        "import/extensions": "off"
      },
      "files": [
        "src/components/organizations/FatComponents.js"
      ]
    },
  ]
}

その他の対処方法

サービスの開発途中から、厳しめのESLintのルールを導入するためにしたこと - カミナシ開発者ブログ
eslint-nibble - npm
eslint-plugin-todo-plz - npm