🌊
React × TypeScriptのアプリにPrettierを導入する
はじめに
React × TypeScriptのアプリにコード自動整形ツールののPrettierを導入したので手順を記載していきます。
動作環境
$ node -v
v14.17.0
$ yarn -v
1.22.17
$ sw_vers
ProductName: macOS
ProductVersion: 11.5.2
BuildVersion: 20G95
Prettierのインストール
公式ドキュメントを参考に進めていきます。
まずはインストールから。
$ yarn add prettier --dev --exact
yarn add v1.22.17
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
[5/5] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ prettier@2.6.2
info All dependencies
└─ prettier@2.6.2
$ yarn run install:front && yarn run install:server
・
・
・
✨ Done in 4.24s.
✨ Done in 12.90s.
実行後のpackage.jsonのdevDependenciesに以下のようなコードが追加されているか確認します。
package.json
"devDependencies": {
"prettier": "2.6.2"
}
次に設定ファイルを手順通りに生成します。
$ echo {}> .prettierrc.json
手順書だとjsonになっていますがyamlでも問題ありません。詳しくは下記を見てみて下さい。
今回は設定項目については触れないので次回以降で記事にしていきたいと思います。
必要があれば.prettierignoreも作成しましょう。
ファーマット対象外のファイル、フォルダを設定出来ます。
package.jsonのscriptsにPrettierの実行コマンドを追加します。
今回は下記のように追加しました。
package.json
"scripts": {
"format": "prettier --write **/*.{ts,tsx}"
}
ルート配下のts, tsxファイル全てに対してフォーマットを実行します。
Prettierの実行
$ yarn format
yarn run v1.22.17
$ prettier --write .**/*.{ts,tsx}
packages/front/vite.config.ts 372ms
packages/front/src/App.tsx 48ms
・
・
・
packages/front/src/pages/signup.tsx 23ms
✨ Done in 3.76s.
ルート配下のts, tsxファイルが自動生成されているか確認しましょう。
実行前
test.ts
const res = await client.get<{ communityId: string }, { List: BaseInfo[] }>(
"/baseInfo/getBaseInfoListByCommunityId",
{
communityId,
}
);
return res.baseInfoList;
実行後
test.ts
const res = await client.get<
{ communityId: string },
{ baseInfoList: BaseInfo[] }
>("/baseInfo/getBaseInfoListByCommunityId", {
communityId,
});
return res.baseInfoList;
導入手順は以上です。
あとはドキュメントを読んで設定項目を調整してみて下さい！
ありがとうございました！
Next...
今のプロジェクトのファイル数だと困ってないのですが、並列で処理できるみたいなのでどこかで試してみようかと思います。
Discussion