ReactプロジェクトのEslint / Prettierの設定について【自分用メモ】
taka_hReactのESLintやPrettierの設定について、プロジェクトを作るたびに「前回どうやったっけ？」と調べている気がしたので、いい加減メモしておこうと思いました。
参考文献
ESLintの基本設定に関しては、以下の書籍を参考にしました。
taka_h
eslint --initでESLintの設定ファイルを作る
まずは、create-react-appでプロジェクトを作成。
TypeScriptで使いたいので、--template typescriptもつけます。
npx create-react-app {プロジェクト名} --template typescript
create-react-appで作成されたプロジェクトには、Eslintが最初からインストールされています。
なので、このままeslint --initコマンドで、Eslintの設定ファイルを作成します。
npx eslint --init
eslint --initコマンドを実行すると、以下のような対話形式でEslintの設定ファイルを作成できます。
Eslintをどのように使いますか?
? 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
デフォルトでは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
ReactではJavaScript modules (import/export)が使われているので、それを選択します。
どのフレームワークを使っていますか?
? Which framework does your project use? …
> React
Vue.js
None of these
Reactを選択します。
TypeScriptを使用していますか
? Does your project use TypeScript > No/ Yes
もちろん、Yes。
コードはどこで実行されますか?
? Where does your code run? …
> Browser
Node
ReactなのでBrowser(ブラウザ)を指定します。
最初の頃は気づかなかったんですが、この項目はブラウザとNode両方を選択することもできるみたいです。
プロジェクトで使うスタイルはどう定義しますか?
? How would you like to define a style for your project? …
> Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
自分でスタイルを決めることもできるみたいですが、私は無難にUse a popular style guide(人気のスタイルガイド)を選択しています。
以下のどのスタイルガイドを使用したいですか?
? Which style guide do you want to follow? …
> Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
私はAirbnbのスタイルガイドを選択しています。やっぱ人気なだけあって、かなり優れたスタイルガイドだと思います。
設定ファイルはどの形式で作成しますか?
? What format do you want your config file to be in? …
> JavaScript
YAML
JSON
慣れた形式の方が良いので、私はJavaScriptを選択しています。
これらのパッケージを今すぐnpmでインストールしますか?
? Would you like to install them now with npm? › No / Yes
Yesを選択して実行するとパッケージがインストールされ、さらにプロジェクトのルートにEslintの設定ファイル.eslintrc.jsが以下の内容で作成されます。
インストールされるパッケージ
- eslint-plugin-react
- @typescript-eslint/eslint-plugin
- eslint-config-airbnb
- eslint
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react-hooks
- @typescript-eslint/parser
.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
'@typescript-eslint',
],
rules: {
},
};
Eslintのパッケージの種類をおさらい
Eslintのパッケージは大まかに、以下の3つに分けられます。
- Parser: 開発言語の構文を解析。
- Plugin: Eslintにルールを追加。
- Config: 複数のルールをまとめて適用。
先ほどインストールしたパッケージを上記の種類ごとに区別すると、以下のような感じになります。
- Parser
- @typescript-eslint/parser (TypeScriptを解析)
- Plugin
- eslint-plugin-react (Reactのルール)
- @typescript-eslint/eslint-plugin (TypeScriptのルール)
- eslint-plugin-import (ES Modulesのルール)
- eslint-plugin-jsx-a11y (JSXのルール)
- eslint-plugin-react-hooks (React Hooksのルール)
- Config
- eslint-config-airbnb (Airbnbスタイルをルールとしてまとめたもの)
先ほどの質問の回答に応じて、必要なパッケージをちゃんとインストールしてくれているのがわかります。
PluginとConfigはどちらも、構文のルールに関するものですが、私はPluginはルール、Configはルールや設定をひとまとめにしたもの、と大雑把に理解しています。（厳密にはもっと詳しい定義があるのかもしれませんが…）
taka_h
parserOptionsの設定
型関連のルールを使う場合、.eslintrc.jsのparserOptionsにTypeScriptコンパイルの設定ファイルのパスを指定する必要があります。
普通に考えたらparserOptionsにはtsconfig.jsonを指定してやれば良さそうに思えますが、そうするとnode_modules内のファイルなどもパースされてしまい、パフォーマンスが低下してしまうそうです。
なのでtsconfig.jsonを拡張したtsconfig.eslint.jsonを別途作成して、それを指定します。
{
"extends": "./tsconfig.json", // tsconfig.jsonを拡張
"include": [ // パースするのは、srcフォルダ内のファイルのみ
"src/**/*.js",
"src/**/*.jsx",
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [ // node_modulesのファイルは除外
"node_modules"
]
}
.eslintrc.jsのparserOptionsの設定は以下のようになります。
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
+ project: './tsconfig.eslint.json',
sourceType: 'module',
+ tsconfigRootDir: __dirname,
},