【React / TypeScript】ESLint と Prettier を設定する（Prettier 編） #React

概略

前回の記事で, Linter（ESLint）を設定した React アプリに, Formatter（Prettier）を適用します。

なお, 現在までの流れは以下の記事です。
1. Create React App（TypeScript）でアプリを起動して Material UI ちょこっと触るまで
2. 【React / TypeScript】 ESLint と Prettier を設定する（ESLint 編）

Formatter はインデントのサイズとか改行とか諸々を揃えてくれるコード整形のツールですね。
（余談ですが, チーム開発においての Formatter 導入は, 諸々の宗教論争が容赦無く静まる感じがつよつよです）

本記事では, Formatter は Prettier を導入します。（著名なやつですね）

Prettier の導入

npm install する

公式に従って進みます。
まず, 設定したいプロジェクトのディレクトリへ移動します。

% cd my-app

prettier を npm install します。（余談：--save-exact すると Version 固定で package.json）に入ります

% npm install --save-dev --save-exact prettier

package.json に Prettier の記載が追加されました。

package.json

"devDependencies": {
  "prettier": "2.2.1"
}

prettier の設定ファイルを用意する

公式通り, 以下を実行して Prettier の設定ファイル .prettierrc.json（空）を用意します。

echo {}> .prettierrc.json

Prettier の除外ディレクトリやファイルを指定するように, .prettierignore も追加します。

touch .prettierignore

.prettierignore の中身は適宜設定どうぞという形ですが, いったん公式通り以下な感じにしておきます

.prettierignoreの中身

# Ignore artifacts:
build
coverage

ESLint との共存のための設定をする

上記, npm install と設定ファイルの用意で動かせるのですが, ESLint を入れている関係で, ESLint と Prettier で競合するルールがあります。
なので, 戦いが始まらないように, ESLint 側に設定を追加します。

やり方の大筋

さて, 前までは eslint-plugin-prettier を用いて ESLint で Prettier を実行する感じが多かったようなのですが, Prettier 公式がそのやり方を非推奨としています。（理由などは公式を参照）
つまるところ, ESLint で静的コード解析を実行して, Prettier でコード整形をするような単純な感じにするとよいとのことです。

では, 公式で指示されている通りに設定していきます。

eslint-config-prettier を設定する

公式で案内されている通り, eslint-config-prettier は, ESLint と Prettier で競合するルールを, ESLint 上でオフにするために使うものです。

では, eslint-config-prettier の公式に従って設定を進めます。
まず npm install します。

npm install --save-dev eslint-config-prettier

続いて, ESLint の設定ファイル .eslintrc.json 内の extends 末尾に prettier を追加します。

公式のコメント通り, Eslint の何の Plugin を使っているかによって, 必要な Prettier の記載を追加します。
"prettier" は基本として入れます。そして, 僕の現状の場合は plugin:react, plugin:@typescript-eslint を利用しているので, "prettier/@typescript-eslint" と "prettier/react" も入れます。

.eslintrc.json

"extends": [
    "... ...",
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
    "... ...",
    "prettier", // 追加
    "prettier/@typescript-eslint", // 追加
    "prettier/react" // 追加
]

ESLint の各種ルール（airbnb とかの）を, prettier 系で上書きして競合ルールをオフにするため, 末尾にいれる必要がある感じです。（後に書かれたもので手前の設定を上書きます）

Prettier を動かす

さて, Prettier の動作のための設定はおわったので, 動かします。

実行した場合にどうなるかを先にみる方法

ファイル名の指定のみで prettier を実行すると, 整形後をみることができます。

% ./node_modules/.bin/prettier src/App.tsx

例えば以下のような src/App.tsx に対して実施すると,

src/App.tsx

import React from 'react';

const App: React.FC = () => (
  <div>
    Hello World
  </div>
);

export default App;

コンソールに以下のように出力されます（prettier 適用後の様子です）

% ./node_modules/.bin/prettier src/App.tsx 
import React from "react";

const App: React.FC = () => <div>Hello World</div>;

export default App;

整形を実行する

--write を指定して prettier を実行すると, 整形して書き換えられます。簡単ですね。

% ./node_modules/.bin/prettier --write src/App.tsx

全部に対してやるなら . 指定です。

% ./node_modules/.bin/prettier --write .

整形のスクリプトを npm scripts に追加する

前回の記事で ESLint を動かすように npm scripts に書きましたが, Prettier 用にも追加します。
package.json の scripts に追加します。以下は src 配下すべてを整形する感じにしていますが, .ts .tsx などに絞るなどは良い感じにご指定ください。

package.json

"scripts": {
  // ... ...
  "lint": "eslint --ext .jsx,.js,.tsx,.ts src/", // ESLint 用
  "fmt": "prettier --write src/**/*" // Prettier 用
}

これで, 以下を実行すれば OK です。

% npm run fmt

そして最初の方の以下の話に戻ると,

さて, 前までは eslint-plugin-prettier を用いて ESLint で Prettier を実行する感じが多かったようなのですが, Prettier 公式がそのやり方を非推奨としています。（理由などは公式を参照）
つまるところ, ESLint で静的コード解析を実行して, Prettier でコード整形をするような単純な感じにするとよいとのことです。

ESLint と Prettier は以下な感じで, fmt して lint する感じで動かすようになります。（npm scripts に追加した方がよいかな）

% npm run fmt && npm run lint

言い残し

最初の方で空で作って放置している .prettierrc.json ですが, 公式の設定例とか設定できる内容とか見つつ良い感じに入れると良いと思います。