ERB Formatter/Beautify

 

Most of solution that exist in the internet is tell you to create a task and call it using ctrl-shift-p menu.

This extension basically using htmlbeautifier to format your file using the Formatter API from the vscode, so no need to create a hack using Task, etc.

Features

Requirements

gem install htmlbeautifier

or

To use the gem with Bundler, add to your Gemfile:

gem 'htmlbeautifier'

NOTE: For you that have a filename with extension .html.erb, your file might be recognized as html file, not as erb file. In that case, add a setting in your settings.json like below:

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

Known Issues

• invalid byte sequence in US-ASCII

  Add below setting. Reference

  "vscode-erb-beautify.customEnvVar": {
    "LC_ALL": "en_US.UTF-8"
  }

Settings

Setting	Description	Default
vscode-erb-beautify.executePath	Path to the htmlbeautifier executable, set this to absolute path when you have different htmlbeautifier location	htmlbeautifier
vscode-erb-beautify.useBundler	Execute htmlbeautifier using bundler (ie 'bundle exec htmlbeautifier'). If this true, vscode-erb-beautify.executePath is ignored	false
vscode-erb-beautify.bundlerPath	Path to the bundler executable, set this to absolute path when you have different bundler location	bundle
vscode-erb-beautify.tabStops	Set number of spaces per indent	2
vscode-erb-beautify.tab	Indent using tabs	false
vscode-erb-beautify.indentBy	Indent the output by NUMBER steps	0
vscode-erb-beautify.stopOnErrors	Stop when invalid nesting is encountered in the input	false
vscode-erb-beautify.keepBlankLines	Set number of consecutive blank lines	0
vscode-erb-beautify.customEnvVar	Custom environment variables to pass to the htmlbeautifier	{}

References

Issue

Issue

Ref