vsCode でコードを自動整形する Prettier を導入する

2022年5月10日

javascript のフォーマッタ Prettier を vsCodeの拡張機能を使って導入してみます。

参考

インストールする

拡張機能から「Prettier - Code Formatter」を検索しインストールします。

フォーマットする

下記の2アクションでフォーマットできるようになります。

  1. 次の操作でコマンドパレットを開く。
    • ( win: CTRL + SHIFT + P )
    • ( mac: COMMAND + SHIFT + P )
  2. format と検索し、Format Document を選択する。

保存時に自動でフォーマットする

前述の2アクションが手間なので、保存時にフォーマットできるようにします。

  1. Settings メニューを開く。
  2. コマンドパレットを開き Open User Settings と検索しクリックする。
  3. Format On Save にチェックを付ける。

Prettier の設定変更する

Open User Settings のページで「prettier」と検索すると Prettier の設定出来る箇所まで移動するのでカスタマイズします。

  • Single Quote: Single Quote か Double Quote を指定する。
  • Semi: 行末にセミコロンを付けるかを指定する。
  • Tab Width: Tabスペース1個あたりの半角スペースの数を指定する。

Prettier 設定ファイルを作成する

設定ファイルを作成し配布する事でチーム全体で一貫性のあるフォーマットを確立出来ます。
次のいずれかの拡張子を持つ.prettierrc.extension という新しいファイルを作成します。

  • yml
  • yaml
  • json
  • js
  • toml

json の例は下記の通り。 (公式 Prettier Docs 参照)

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

2022年5月10日