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のところによしなに設定を書く。以下のサイトを眺めると良い。
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のコマンドを組み込んだりして常にリントエラー、フォーマットエラーを弾けるような仕組み作りをしておくとなお良い。凝り出すと面倒だが、必要最小限の設定はこの程度で済む。あとは好きにいじろう。