今回はPrettier編。 整形を担当してくれるプラグインです。
コード規約を強制してあげることができます。
'と"のどっちを使うかなど、自分が揃えていても開発は複数人で行うもの
たくさんの人でコードを書くと各自の美学でコードは鮮やかになってしまうのでルールを決めてしまいましょう。
設定をしていく
- Prettier関連を追加する
必要なプラグインを追加します。
yarn add -D prettier eslint-plugin-prettierPrettierの設定ファイルを追加
.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 おわりです！