TypeScript+React用にprettierを導入する

注意事項

本記事はprettierをESLintのプラグインとして導入する方法となっていますが、2020年9月終わりくらいにこの方法はprettierの公式で非推奨となったようです。
Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった
公式のGitHub

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

前提

TypeScript+Reactで開発環境を構築済みであること
参照：
TypeScript+Reactでモダンな環境に入門してみる
TypeScript+React用にESLintを導入する

各種バージョン
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用の設定を追記

追記箇所抜粋

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

・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を実行する設定はこちらを参照

参考

りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅱ. React基礎編】
Options · Prettier
末尾のカンマ - JavaScript | MDN
Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった