ERBFormatter/Beautify 設定

はじめに

html.erbファイルを保存するときに自動でフォーマットされるようにします。
フォーマッターにはERBFormatter/Beautifyを使います。
https://github.com/aliariff/vscode-erb-beautify

環境

rails 6.1.7
ruby 3.0.6

extensions.json

フォーマッターの設定は.vscode直下にsettings.jsonとextensions.jsonを作成して行います。
今回使うExtensionをjsonに設定しましょう。

.vscode/extensions.json

{
  "recommendations": [
    "aliariff.vscode-erb-beautify"
  ]
}

htmlbeautifier

ERBFormatter/Beautifyは内部的にhtmlbeautifierを使っているのでPCにインストールします。

gem install htmlbeautifier

あとで設定する時にhtmlbeautifierの実行パスが必要になるので調べておきます。

rbenv which htmlbeautifier

settings.json

後はsettings.jsonに設定を記載します。

.vscode/settings.json

{
  "files.associations": {
    "*.html.erb": "erb"
  },
  "[erb]": {
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
    "editor.formatOnSave": true
  },
  "vscode-erb-beautify.executePath": "path_to_htmlbeautifier",
  "vscode-erb-beautify.customEnvVar": {
    "LC_ALL": "en_US.UTF-8"
  }
}

参考リンク

https://qiita.com/pokeneko/items/c80be1af2edb7698f248
https://www.y-i.jp/entry/auto-format-erb-vscode