VSCodeでファイル保存時にPrettierが自動で実行されるように設定する

はじめに

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

Related Posts