Reactでeslintの初期設定をする方法（設定メモ

React サンプルアプリケーションを作成

$ npx create-react-app sample-app
$ cd sample-app

eslintのインストールと初期設定

$ npm i --save-dev eslint
$ npm i --save-dev eslint prettier eslint-config-prettier
$ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide # Use a populer style guide.
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0
? Would you like to install them now with npm? › No / Yes

設定ファイル

ルールに以下を追加する。

.eslintrc.json

{
    "rules": {
        // 関数を呼び出し元よりも前に書くルールを無効化する。
        "no-use-before-define": 0,
        // js, jsxどちらでも利用できるようにする。
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

VS Code の設定

プラグインをインストールする。

ESLint

ESLintのプラグインは、ESLint と VS Code を連携させてリアルタイムでエラー検出ができるようになります。

Prettier - Code formatter

Prettier プラグインには prettier 本体がバンドルされており、プラグイン単体でもコード整形機能がある。（npmでのインストールが必須ではない）
ただ、npm で prettier がローカルインストールされている場合は、そちらを優先して使用するようになっているようです。

保存時に自動でフォーマットする。

設定時は「user」タブではなく「workspaces」を選択して設定すること。
「user」を選択した状態で設定するとvscode全体の設定になってしまいます。

設定の検索欄から「onsave」を検索。
「Format On Save」という項目にチェックを入れる。

設定の検索欄から「format」を検索。
「Default Formatter」という項目に「Prettier - Code formatter」を選択する。

vscodeのsettings.jsonが以下のようになっていることを確認。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}