ESLintrc ジェネレーター

生成される設定の内容

ジェネレーターは常にeslint:recommendedから始め、選択内容に応じた項目だけを追加します。

• browserやnodeを含むenv、さらにes2022
• TypeScriptがオンの場合は@typescript-eslint/parserとplugin:@typescript-eslint/recommended
• Reactがオンの場合はplugin:react/recommended
• warnに設定されたno-consoleとno-unused-vars

出力は従来の.eslintrc.json形式のシンプルなJSONオブジェクトで、貼り付けて独自のルールを追加できます。

フラット設定と従来設定の比較

ESLint 9では.eslintrc.*形式が非推奨となり、フラット設定（eslint.config.js）が推奨になりました。主な違いは次のとおりです。

新規プロジェクトはフラット設定を使うべきです。既存プロジェクトは10.x系まで従来設定のままでも構いませんが、移行を推奨します。

プラグインのエコシステム

典型的なReact/TSプロジェクトのプラグイン。

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

そこそこ意見の強い1つの構成でも6パッケージです。ジェネレーターは選択したプラグインだけを追加するので、設定が参照するものだけをインストールすれば済みます。

Prettierとの共存

Prettierは整形を担当し、ESLintは整形以外の正しさとスタイルを担当します。競合を避けるには、次のようにします。

1. eslint-config-prettierをインストールし、extends/configの最後の項目として追加します。
2. これはPrettierの出力と競合するすべてのESLintルールをオフにします。
3. Prettierは別途実行します（エディタの保存時、pre-commitフック、CI）。

新規プロジェクトではeslint-plugin-prettierは使わないでください。ESLintの中でPrettierを実行するため、ESLintを遅くします。2つのツールは分けましょう。

ルール調整のヒント

• 緩く始めて、徐々に厳しくする。 エラーより先に警告を有効にします。
• テスト用にオーバーライド。 テストファイルではno-unused-expressionsを緩め、Jestのグローバルを使えるようにすることがよくあります。
• スクリプト用にオーバーライド。 ビルドスクリプトでは、env: nodeをグローバルに追加せずにNodeのグローバルが必要になることがあります。
• オーバーライドにコメントを。 どのルールのオーバーライドにも、理由を説明するコメントを付ける価値があります。

エディタに合わせた設定

VS CodeにはESLint拡張機能のインストールと設定が必要です。保存時の自動修正のために、ワークスペース設定に次を追加してください。

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}