TypeScript+Reactのプロジェクトでeslintの設定

TypeScript+Reactで新規プロジェクトを立ち上げるたびに、eslintの設定を忘れてしまうので、備忘録として残しておきます。
基本的にはrecommendedの設定を採用する設定の紹介なので、細かい設定はここでは記載しません。

関連するライブラリのインストール

関連するライブラリをプロジェクト上でインストールします。

> yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

※prettierとは

prettierとは、正確には構文解析ではなく、コードを見やすくするためのコードフォーマッターになります。
https://prettier.io/docs/en/

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

eslint-plugin-prettierはこのprettierをeslintからまとめて呼び出すことができるプラグインになります。
自分は構文解析とコードフォーマットを別々で管理するのが面倒なので、この方式を採用していますが、公式では非推奨になっているので、各自のご判断で別々にすることも検討してみてください。
https://prettier.io/docs/en/integrating-with-linters.html#notes

.eslint.jsonの設定

.eslint.jsonの設定を行います。

.eslint.json

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

package.jsonのscriptsの定義

package.jsonの定義は下記のとおりです。

package.json

"scripts": {
    "eslint": "eslint src/** --no-error-on-unmatched-pattern --ext .ts,.tsx",
    "eslint:fix": "eslint --fix src/** --no-error-on-unmatched-pattern --ext .ts,.tsx"
  },

--no-error-on-unmatched-patternとつけている理由は、これがないと.ts,.tsx以外のファイルがある場合にはエラーになってしまうためです。