Prettierの自動フォーマットをvscodeのファイル保存時に行う方法［基礎的］
vscodeのファイル保存時にPrettierが効くようにします
手順
- vscodeで拡張機能をインストール
prettierとかprettier-vscodeで検索すると出てきます
-
.vscode/settings.jsonに設定を書く
コマンドパレットを開いて（mac: Cmd + Shift + P)、Preferences: Open User Settings (JSON)を選択すると、
.vscode/settings.jsonが表示されます
そこに次のコードを追記します
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
これで完了です
試してみる
保存前
１行が長かったり、余分な改行があったり、インデントがおかしかったりする
<p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
<strong>Welcome to Acme.</strong> This is the example for the{' '}
{/* 余分な改行 */}
<a href="https://nextjs.org/learn/" className="text-blue-500">Next.js Learn Course</a>
, brought to you by Vercel.
</p>
保存後
<p
className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
>
<strong>Welcome to Acme.</strong> This is the example for the{' '}
{/* 余分な改行 */}
<a href="https://nextjs.org/learn/" className="text-blue-500">
Next.js Learn Course
</a>
, brought to you by Vercel.
</p>
pの開始タグが3行になっていたり、余分なスペースが詰められました
余談
適用する言語を指定する場合
"[typescript]": {
"editor.formatOnSave": true
},
複数の言語に設定したい場合でも"[typescript, javascript]": {というように書くことはできないらしく、設定する言語ごとに"editor.formatOnSave": trueを記述する必要があるようです
Prettierが見に行くファイル（基準となるもの）は何？
これを疑問に思いました。
今自分が携わっているプロジェクトには.prettierrc.ymlがあり、ここのルールに従ってコード整形が行われています。
しかし、例えば先ほど出てきたnextjsのチュートリアルのリポジトリにはprettier~というファイルはありません。ですが冒頭の設定を行ったことで、チュートリアルのファイルを保存してもコード整形が行わるようになりました。これはなぜなのか？
調べた結果、この理由はPrettierにデフォルトの整形ルールが設定されているからだそうです。
リポジトリにPrettierの設定ファイルが存在する -> それを基準にする
存在しない -> Prettierのデフォルトの設定を基準にする
こういう法則になっているようです。
まだ理解が曖昧なので、Prettierの公式に書かれている詳細をちゃんと理解したいと思っています
さいごに
プログラミングのコードだけ書いていたこれまでと違って、最近はこういったこととかインフラとかCI/CDだったりにも関われるようになってきたので、視野が広がって楽しい
参考になった記事
prettier-vscodeドキュメント
Discussion