erbファイル - 自動formatter設定（vsCode）

久々にrailsチュートリアルを再度勉強しているのですが、erbファイルの自動フォーマットをしたいと思い、vsCodeの拡張機能を利用した設定を行いました。
その手順を備忘録として記載します。

参考記事

1. 拡張機能インストール

ERB Formatter/Beautify という拡張機能をインストールします。

2.必要gemをインストール

ターミナルで以下を実行します。

$ gem install htmlbeautifier

完了後、プロジェクトのgemFileに以下を記載し、bundle installします。
develop環境でのみで利用するため、その中に記載しています。

Gemfile

group :development do
  ~ 略 ~
  gem 'htmlbeautifier'
end

bundle install

ここで、後程の設定でhtmlbeautifierのpathが必要になるため、確認しておきます。

$ which htmlbeautifier
/path/to/your/htmlbeautifier

3.設定ファイルを作成する

プロジェクト配下の .vscodeディレクトリに、extensions.jsonファイルとsettings.jsonファイルを作成します。ディレクトリがなければ手動で作成して大丈夫です。
※extensions.jsonは必須でないですが、もし別環境でも作業するなどの場合にアテンションしてくれるので、念の為作成しておきます。また、特にチーム開発をする場合は共通フォーマッタを利用することでコードのばらつきが減ると思います

中身を記載していきます。
※setting.jsonのvscode-erb-beautify.executePathには、先ほど確認したパスを入れます。コピペをする際はご注意ください。

extensions.json

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

settings.json

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

これで完了です。
ctrl + sなどで保存すると、綺麗erbファイルが自動で綺麗な見た目に修正されると思います。