TypeScript+React用にprettierを導入する

## 注意事項
本記事はprettierをESLintのプラグインとして導入する方法となっていますが、2020年9月終わりくらいにこの方法はprettierの公式で非推奨となったようです。
[Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった](https://blog.ojisan.io/prettier-eslint-cli)
[公式のGitHub](https://github.com/prettier/prettier/blob/554b15473dd4032a036d7db91a8f579e624c9822/docs/integrating-with-linters.md)

ただ、筆者がフロントエンド始めたばかりのため、このあたりの理解が浅く、いったん現在よく使われているプラグインとして組み込む方法で書いています。

## 前提
TypeScript+Reactで開発環境を構築済みであること
参照：
[TypeScript+Reactでモダンな環境に入門してみる](https://qiita.com/Captain_Blue/items/2cf22f0bd66136d05ebf)
[TypeScript+React用にESLintを導入する](https://qiita.com/Captain_Blue/items/5d6969643148174e70b3)

各種バージョン
macOS Catalina 10.15.7
VS Code 1.49.3
node.js 14.4.0
yarn 1.22.10
TypeScript 4.0.3
React 17.0.1

## prettierのインストール
ESLintの--fixオプションに組み込む形でインストールする

```
$ yarn add -D stylelint-config-styled-components stylelint-processor-styled-components
```

## 設定ファイル（eslintrc.js）にprettier用の設定を追記

追記箇所抜粋

```js:eslintrc.js
  extends: [
    'plugin:react/recommended',
    // Airbnbが提供する共有設定。広く使われている
    'airbnb',
    // 各プラグイン推奨共有設定
    'airbnb/hooks',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    // ↓ここから ※eslint-config-prettierの設定。既出のESLintのルール設定と競合する部分を書き換えている
    'plugin:prettier/recommended',
    'prettier',
    'prettier/@typescript-eslint',
    'prettier/react',
    'prettier/standard'
　　// ↑ここまで
  ],
// 中略
  plugins: [
      '@typescript-eslint',
      'import',
      'jsx-a11y',
      'prettier', // 追記
      'react',
      'react-hooks',
  ],
```

## prettier用の設定ファイル（.prettierrc）を追加
※プロジェクトルート直下に配置すること

```:.prettierrc
{
  "bracketSpacing": true,
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false
}
```

設定オプションについて

・`bracketSpacing`：
オブジェクトリテラル書くときの`{}`の内側にスペースを入れるかどうかの設定
true → `{ foo: bar }`
false → `{foo: bar}`

・`printWidth`：
一行の文字数を設定

.`semi`：
文の最後にセミコロンをつけるかつけないかの設定

・`singleQuote`
ダブルクウォートの代わりにシングルクォートを使うかどうかの設定

・`trailingComma`
最後のプロパティに`,`をつける設定。
ずっと、なんで次の要素がないのにカンマつけてるんだろう？と思ってたが、調べたら本来の修正のみの差分にするための工夫だったらしい。なるほど。
> 末尾のカンマ ("最後のカンマ" と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。
_[末尾のカンマ - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Trailing_commas)_

・`useTabs`
インデントにタブを使うかどうかの設定。falseの場合、スペースを使う

## ESLintのルールとPrettierのルールがぶつかっていないか確認する

```
$ npx eslint --print-config .eslintrc.js | npx eslint-config-prettier-check
// 問題なければ以下のメッセージが表示
No rules that are unnecessary or conflict with Prettier were found.
```

これで、ソース保存時に`eslint --fix`が走るのに合わせて、Prettierが実行される
VS Codeで保存時にESLintを実行する設定は[こちらを参照](https://qiita.com/Captain_Blue/items/5d6969643148174e70b3#vs-code%E3%81%ABeslint%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B)

## 参考
[りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅱ. React基礎編】](https://oukayuka.booth.pm/items/2368019)
[Options · Prettier](https://prettier.io/docs/en/options.html)
[末尾のカンマ - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Trailing_commas)
[Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった](https://blog.ojisan.io/prettier-eslint-cli)