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

概略

前回の記事で, 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 ですが, 公式の設定例 とか設定できる内容 とか見つつ良い感じに入れると良いと思います。