ERB Formatter/Beautify

Overview

The ERB Formatter/Beautify extension for Visual Studio Code uses the htmlbeautifier gem to format ERB files, providing a seamless experience with the VS Code Formatter API. Unlike other solutions that require setting up tasks or manual formatting, this extension integrates directly with VS Code to format your ERB files automatically.

Features

• Formats ERB files using htmlbeautifier.
• Works with the VS Code Formatter API for a native experience.
• Supports custom configuration options for indentation, blank lines, and error handling.
• Ability to ignore specific files or patterns.

Installation

Requirements

To use this extension, you must have htmlbeautifier installed on your system. You can install it globally or add it to your project's Gemfile.

Install Globally

gem install htmlbeautifier

Install with Bundler

Add the following to your Gemfile:

gem 'htmlbeautifier'

Then run:

bundle install

Configuration

Resolving File Recognition Issues

If .html.erb files are recognized as HTML instead of ERB, add the following to your settings.json to associate .html.erb files with the ERB language:

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

Setting Default Formatter and Enabling Format-on-Save

To set the default formatter for ERB files and enable format-on-save, add the following to your settings.json:

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

This ensures that the extension formats ERB files automatically whenever they are saved.

Disabling Formatting for Specific Files

To disable formatting for specific ERB files, such as email templates, use the ignoreFormatFilePatterns setting. Add the following to your settings.json:

"vscode-erb-beautify.ignoreFormatFilePatterns": ["**/email_templates/**/*.erb"]

This configuration ignores all .erb files inside the email_templates directory.

Fixing Encoding Issues

If you encounter the Invalid byte sequence in US-ASCII error, add the following setting to your settings.json to set the correct locale:

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

For more details, see the related issue.

Settings

Below is a list of settings you can configure in your settings.json file:

References

• Issue on htmlbeautifier
• VS Code Ruby Extension Issue
• Enable Formatting with ERB Files in VS Code

Credits

• Icon made by rootedbox