html.erbファイルをVisual Studio CodeでAuto FormatするのはERB Formatter/Beautifyがよさそう

最近Rails7でコードを書いているのですが、 Visual Studio Code（以下VSCode）でhtml.erbファイルを編集する場面が多いです。Rails7のRails Wayでやっていてhtml.erbでturboで書いている場合はJSよりはhtml.erbを編集する機会が増えるのではないかと思っています。

VSCodeでhtml.erbを書いているとAuto Formatしてほしくなります。インデントとか空行とかあまり意識せずに勝手に整えてほしいですよね。

結論

いくつか調べたのですが、結局 ERB Formatter/Beautify というVSCodeのExtensionが今の所良さそうでした。

marketplace.visualstudio.com

必要な設定

`setting.json`

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

`Gemfile`

gem 'htmlbeautifier'

私は group :development do と end の間に書いています。productionには不要ですからね。

Prettierでやりたかったけどイマイチでした

rubyとかはPrettierでフォーマットしているのでhtml.erbも一緒にできないかなと思ったのですが私には合いませんでした。

Prettier でフォーマットするには、 html.erb を html として扱う必要があります。erb用のparserは多分無い。

setting.json にこんな感じで設定すればhtmlとしてフォーマットしてくれます。

"files.associations": {
   "*.html.erb": "html"
}

しかし、erbとしてハイライトしている部分とかがハイライトされなくなります。

ハイライトが動作していなくてerb独自コードが白色で書かれているスクリーンショット — <% とかが真っ白ですね。。。

eslint にも eslint-plugin-erb ってのがあるみたい

これは試していないです。 ERB Formatter/Beautify で満足いかない所があったりしたらまた試してみようと思います。

好きなものだけ書く。ポジティブに。

好きなことを楽しく。プログラミング、写真、音楽、ガジェットとか。