create-react-appで作ったReactプロジェクトにESLint, Prettierを導入する

Reactで何か作りたいと思ったとき、create-react-appは非常に有用だ。たとえ本格的な開発ではないにしても、こうして作ったプロジェクトにはESLint, Prettierを導入して快適に開発したくなるものだ。TypeScriptを使っているなら特に。しかし、毎度のごとく導入方法を忘れてググる羽目になっているので、今回は自分の備忘録としてこの記事を書いている。あと、古い記事では現在非推奨になっているeslint-plugin-prettierを使っているものも多く、検索が面倒臭いというのもある。

バージョン情報

Node.js: v16.17.1
create-react-app: 5.0.1

1. create-react-appの導入

yarn教徒なのでコマンドは以下。

yarn create react-app hoge-app --template typescript

終わり。

2. ESLintの導入

次はESLintを導入する。先ほどeslint-plugin-prettierに触れたが、このプラグインはESLintというリンター、Prettierというフォーマッターを統合するようなプラグインだ。現在は非推奨の設定になっているためそれに準拠し、今回はこれらを統合せずにそれぞれ役割を分けて別で管理する。このプラグインを入れてしまうとリンターのエラーもフォーマッターのエラーも同様にVSCode上で赤文字で警告が出てしまい、煩わしいことこの上ない。リンターはあくまで文法、構文チェック、フォーマッターはコードの体裁チェックとはっきり分けておいた方が分かりやすい。

まずはインストール。

yarn add -D eslint

次にESLintの設定。インタラクティブに設定項目について選べるようになっているのでそれぞれ以下のように答えた。設定ファイルの拡張子はお好きに。

npx eslint --init

> @eslint/create-config@0.3.1
Ok to proceed? (y)  y

How would you like to use ESLint? … 
  To check syntax only
▸ To check syntax and find problems
  To check syntax, find problems, and enforce code style

 What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

Which framework does your project use? … 
▸ React
  Vue.js
  None of these

 Does your project use TypeScript? ‣ Yes

Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
Node

What format do you want your config file to be in? … 
  JavaScript
  YAML
▸ JSON

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? ‣ Yes

Which package manager do you want to use? … 
  npm
▸ yarn
  pnpm

最終的にeslintrc.jsonは以下のように生成されていた。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

rulesのところによしなに設定を書く。以下のサイトを眺めると良い。

eslint.org

3. Prettierの導入

最後はPrettierの導入。以下のコマンドを実行する。

yarn add -D prettier eslint-config-prettier

eslint-config-prettierはeslintのフォーマットに関する設定を全て無効化してくれる。これでprettierとの棲み分けができる。

eslintrc.jsonのextendsの最後にprettierを追加して設定が競合しないようにするのもお忘れなく。

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier" // 追加

あとは .prettierrc を作ってフォーマッターの設定を書いていく。ここは各自その時のフィーリングでよしなにやる。兎にも角にもリンターの設定は.eslintrc.json, フォーマッターの設定は .prettierrcと分離できた。

最後に

せっかく設定したので実行コマンドをpackage.jsonのscriptsに定義しておく。

 "scripts": {
    ...
    "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
    "lint:check": "eslint \"src/**/*.{ts,tsx}\"",
    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx}\""
    ...

はい、これで終わり。あとはCIに:checkのコマンドを組み込んだりして常にリントエラー、フォーマットエラーを弾けるような仕組み作りをしておくとなお良い。凝り出すと面倒だが、必要最小限の設定はこの程度で済む。あとは好きにいじろう。