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

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

なお, 現在までの流れは以下の記事です。
1. [Create React App（TypeScript）でアプリを起動して Material UI ちょこっと触るまで](https://qiita.com/ro-komatsuna/items/271eb2c8f430e3dd99ae)
2. [【React / TypeScript】 ESLint と Prettier を設定する（ESLint 編）
](https://qiita.com/ro-komatsuna/items/c5c235b8e992a2b58640)


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

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

## Prettier の導入

### npm install する
[公式](https://prettier.io/docs/en/install.html) に従って進みます。
まず, 設定したいプロジェクトのディレクトリへ移動します。

```
% cd my-app
```

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

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

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

```json:package.json
"devDependencies": {
  "prettier": "2.2.1"
}
```

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

```
echo {}> .prettierrc.json
```

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

```
touch .prettierignore
```

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

```terminal:.prettierignoreの中身
# Ignore artifacts:
build
coverage
```

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

#### やり方の大筋
さて, 前までは `eslint-plugin-prettier` を用いて ESLint で Prettier を実行する感じが多かったようなのですが, Prettier 公式がそのやり方を非推奨としています。（[理由などは公式を参照](https://prettier.io/docs/en/integrating-with-linters.html)）
つまるところ, ESLint で静的コード解析を実行して, Prettier でコード整形をするような単純な感じにするとよいとのことです。

では, [公式](https://prettier.io/docs/en/install.html#eslint-and-other-linters)で指示されている通りに設定していきます。

#### eslint-config-prettier を設定する
[公式](https://prettier.io/docs/en/install.html#eslint-and-other-linters) で案内されている通り, `eslint-config-prettier` は, ESLint と Prettier で競合するルールを, ESLint 上でオフにするために使うものです。

では, [eslint-config-prettier の公式](https://github.com/prettier/eslint-config-prettier#installation) に従って設定を進めます。
まず `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"` も入れます。

```jsonc:.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` に対して実施すると, 

```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 に追加する
[前回の記事](https://qiita.com/ro-komatsuna/items/c5c235b8e992a2b58640)で ESLint を動かすように npm scripts に書きましたが, Prettier 用にも追加します。
`package.json` の `scripts` に追加します。以下は `src` 配下すべてを整形する感じにしていますが, `.ts .tsx` などに絞るなどは良い感じにご指定ください。

```jsonc: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 公式がそのやり方を非推奨としています。（[理由などは公式を参照](https://prettier.io/docs/en/integrating-with-linters.html)）
つまるところ, ESLint で静的コード解析を実行して, Prettier でコード整形をするような単純な感じにするとよいとのことです。

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

```
% npm run fmt && npm run lint
```

## 言い残し
最初の方で空で作って放置している `.prettierrc.json` ですが, [公式の設定例](https://prettier.io/docs/en/configuration.html) とか[設定できる内容](https://prettier.io/docs/en/options.html) とか見つつ良い感じに入れると良いと思います。