[React.js]create-react-appのlintからESLintへ移行する

create-react-appにもデフォルトでeslintが入っていて、eslintコマンドも使えるのですが、
react-scriptsでの起動から変える時にESLintを改めて導入して使えるようにしたのでそのまとめです。

monorepo環境のプロジェクトで実行方法をreact-app-rewiredに変えたり、
テストの実行方法をjestに変えたりしてカスタマイズした一環です。

1. プラグインのインストール
2. eslint で解析対象から除外したいものを指定
3. script の追加
4. .eslintrc.yml の作成
- 4.1. jestのバージョン指定について
5. (Option) vscode の settings.json を作成
6. 関連

プラグインのインストール

yarn add --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

eslint で解析対象から除外したいものを指定

package.jsonにeslintIgnore項目を追加します。

{
  ...
  "eslintIgnore": [
    "**/build/**/*.js",
    "**/coverage/**/*.js",
    "**/*.test.ts",
    "**/*.test.tsx",
    "**/*.stories.tsx"
  ]
  ...
}

script の追加

package.jsonにESLintの実行コマンドを追加します。

{
  ...
  "script": {
    "lint_check": "yarn eslint --ext .js,.jsx,.ts,.tsx .",
    "lint": "yarn eslint --ext .js,.jsx,.ts,.tsx -f json -o ./report/eslint-report.json"
  }
  ...
}

ポイントとしては、ただのeslintコマンドの実行だと解析対象のファイルはjsだけとなり、typescriptを認識してくれません。

なので、 --ext オプションを使ってtypescriptのファイルもlint対象に設定してます。

そして-fオプションと-oオプションを使い、json形式でレポートファイルを出力するように設定しています。

`.eslintrc.yml` の作成

env:
  es2020: true
  jest/globals: true
parser: '@typescript-eslint/parser'
parserOptions:
  project: ./tsconfig.json
  ecmaFeatures:
    jsx: true
plugins:
  - react
  - jest
  - '@typescript-eslint'
settings:
  react:
    version: detect
  jest:
    version: 26
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:jest/recommended
  - prettier
rules:
  '@typescript-eslint/explicit-function-return-type': off
  '@typescript-eslint/ban-types': off
  '@typescript-eslint/explicit-module-boundary-types': off
  '@typescript-eslint/no-explicit-any': off
  'jest/no-conditional-expect': off
  'jest/no-try-expect': off
  'jest/no-jasmine-globals': off

インストールしたプラグインと設定ファイルのマッピング

yarn addしたパッケージ	.eslintrc.ymlの設定
eslint
@typescript-eslint/eslint-plugin	extends – plugin:@typescript-eslint/eslint-recommended
@typescript-eslint/parser	parser: ‘@typescript-eslint/parser’
eslint-config-prettier	extends – prettier
eslint-plugin-jest	plugins – ‘jest’
eslint-plugin-jsx-a11y	plugins – ‘jsx-a11y’
eslint-plugin-react	`extends:` `- eslint:recommended` `- plugin:react/recommended`
eslint-plugin-react-hooks	extends – plugin:react-hooks/recommended
prettier

jestのバージョン指定について

  jest:
    version: 26

vscodeで開発している場合、vscodeのlint機能とprojectのESLintが噛み合わずvscode上でエラーメッセージが頻繁に表示される場合があります。

その際の回避策としてESLintの設定上でjestのバージョンを指定すると解消されます。

参考：Unable to detect Jest version in create-react-app project

(Option) vscode の settings.json を作成

vscodeで開発している場合、vscode上での設定を追加しておきます。

[rootProject]/.vscode/settings.json

{
  "files.autoSave": "afterDelay",
  "prettier.jsxBracketSameLine": true,
  "prettier.jsxSingleQuote": true,
  "prettier.packageManager": "yarn",
  "prettier.printWidth": 140,
  "prettier.singleQuote": true,
  "eslint.packageManager": "yarn",
  "eslint.validate": ["typescript", "typescriptreact"],
  "eslint.enable": true
}