はじめに
大人数で開発を進めるとき、コードフォーマットが共有されていないとインデントやスペースなどが各開発者の独自のスタイルに依存しちゃいますよね。コード規約を決めていても、それだけでPull Requestの指摘コメントが埋まってしまったり。。
ということで、機械的に、しかもファイルの保存時に自動でPrettierが走ってくれるように設定してみましょう。こうすることで高速に、かつ安心して開発を進めることができます。
前提
- VSCodeがインストールされている
筆者の環境
- MacOS Big Sur 11.4
- VSCode 1.70.0 Universal
やること
- Prettierをインストールする
- settings.jsonを書く
Prettierをインストールする

- VSCodeの拡張機能のマーケットプレイスで
Prettier Code formatter
をインストールします
settings.jsonを書く
- VSCodeの
表示 >
コマンドパレット
をクリック

- settings.jsonと入力する

- 適切な
settings.json
を開き、以下を追記する
{
...
...
# ここから下を追記
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
}
- これで準備OKです。
- ファイルを変なふうに編集し、保存してみましょう。
- 自動で綺麗にフォーマットされたら成功です