【Rails】erbをVSCodeでフォーマットする方法

拡張機能をインストール

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

Gemをインストール

上記の拡張機能を使用するためにはHTML Beautifierが必要なのでインストールします。

Gemfile

group :development do
  gem 'htmlbeautifier'
end

でbundle install。
または、ターミナルで以下のコマンドを実行します。

ターミナル

gem install htmlbeautifier

設定を記述する

settings.jsonに以下の記述を追記します。

settings.json

"[erb]": {
  "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
  "editor.formatOnSave": true
},
"files.associations": {
  "*.html.erb": "erb"
}

// invalid byte sequence in US-ASCII エラーが発生する場合
"vscode-erb-beautify.customEnvVar": {
  "LC_ALL": "en_US.UTF-8"
}

上記の設定を記述するとファイル保存時にフォーマットされるようになります。