コードフォーマッターにPrettierを使う方法

ご覧いただきありがとうございます。こやさんです。
コードフォーマッターをちゃんと考えようとなりましたので、今回はコードフォーマッターの Prettier の導入についてまとめます。

環境

PC：MacBook Pro 13-inch, 2020, Four Thunderbolt 3 ports
macOS：Ventura 13.5.1

Prettier のインストール

Prettierのインストールを行います。

npm install --save-dev prettier

VSCode へ拡張機能

Prettier

VSCodeの設定更新

VScodeの設定に以下を追加して、Prettierが対象言語のデフォルトのフォーマッタとなるようにします。
今回は例としてjsonにしています。

"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Prettierの設定

Prettierで実際にどういったフォーマットをするのかを記載します。

{
  "semi": false,
  "printWidth": 80,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "trailingComma": "none",
        "tabWidth": 2,
        "singleQuote": false,
        "parser": "json"
      }
    }
  ]
}

以上でフォーマッタの設定は完了となります！