はじめに

大人数で開発を進めるとき、コードフォーマットが共有されていないとインデントやスペースなどが各開発者の独自のスタイルに依存しちゃいますよね。コード規約を決めていても、それだけで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です。
• ファイルを変なふうに編集し、保存してみましょう。
• 自動で綺麗にフォーマットされたら成功です