今回は Prettier 編。
整形を担当してくれるプラグインです。

コード規約を強制してあげることができます。
'と"のどっちを使うかなど、自分が揃えていても開発は複数人で行うもの
たくさんの人でコードを書くと各自の美学でコードは鮮やかになってしまうのでルールを決めてしまいましょう。

設定をしていく

1. Prettier 関連を追加する

必要なプラグインを追加します。

  yarn add -D prettier eslint-plugin-prettier

Prettier の設定ファイルを追加
.prettierrc

  {
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "parser": "typescript",
  "filepath": "./src/**/*.{ts,tsx}"
}

ESLint の設定

eslint の plugin も設定します。

  ...
  'plugins': [
    'react',
    '@typescript-eslint',
    'react-hooks',
+    'prettier'
  ],
...

おわり

Prettier はこれだけでお k
おわりです！