If you’re a front-end developer like me, you’ve probably encountered the challenges of coding with Ruby and .html.erb files. It can be frustrating when your code doesn’t auto-format correctly, or when syntax highlighting fails, leaving everything in a monotonous white. This is a common issue as Prettier, our usual go-to for these tasks, doesn’t fully support these file types. But don’t worry, I’ve found a solution! While it doesn’t involve Prettier, it does ensure proper formatting and brings back the vibrant, color-coded syntax we all love. Please note that the extensions I will discuss are intended for VSCode.

Be aware: I’m not sure if the tips presented here will work for other editors, but you’re welcome to try and let me know 😊.

Now, with no further ado: let’s dive in!

Demystifying .html.erb in Ruby on Rails

For those who work with Ruby, .html.erb files are a familiar sight. However, if you’re new to the language or only have a basic understanding, let’s delve into what these files are and how they function within the Ruby on Rails framework.

.html.erb files are a key component of Ruby on Rails. The extension stands for HTML embedded with Ruby, similar to how JSX embeds JavaScript within HTML. In these files, you write standard HTML code interlaced with Ruby. This Ruby code is enclosed within special tags and is processed by the Rails server to generate dynamic web pages. These pages can adapt based on variables, database queries, and more.

How does it work?

⚠️
<% %>: Executes the Ruby code within the brackets
<%= %>: Executes the Ruby code and also displays the result

Let’s examine the example below:

<ul>
    <% @products.each do |p| %>
    <li>
        <%= p.name %>
    </li>
    <% end %>
</ul>

Did you get it? Let’s go step-by-step.

In this example, @products is a Ruby array of products, each having a name attribute. The line <% @products.each do |p| %> initiates a loop that iterates over each product. For each product, it outputs a list tag with the product’s name. The output of anything within <%= %> tags is directly inserted into the HTML output stream.

All good? OK. Let’s continue.

Why should we care about it?

By now, we have a basic understanding of what .html.erb files are. But why do we need extensions to format or syntax to highlight these files? The answer is simple: to make our lives as developers happier!

Consider the first scenario. We’ve successfully used an extension (the one that you found) to auto-format our code, but it doesn’t provide syntax highlighting. This can be quite disheartening. Without color differentiation, it becomes more challenging to read the code or locate specific elements, whether it’s a bug or a necessary change.

Now, let’s look at the second scenario. Here, we’ve managed to apply syntax highlighting, but the code doesn’t auto-format. This means we have to manually format the code every time we add a tag, which can be quite tedious and time-consuming. Imagine adding a multitude of tags in the middle of your code. The constant need to manually adjust the indentation and formatting can be exhausting, not to mention the disruption it causes to your coding flow.

In conclusion, using extensions to format and syntax highlight .html.erb files can significantly improve your coding experience by making your code more readable and easier to manage. Stay tuned for the next section where we’ll explore the way I found it to work both, syntax highlight and auto-format!

Unveiling the Magic!

First things first! It’s important to note that the solutions I’m about to share have been tested and proven to work on VSCode. While they may work on other IDEs, I can’t guarantee their effectiveness. Now, let’s get started. To make this magic happen, you’ll need a few extensions. Yes, it might seem like a lot, but trust me, the results will be worth it!

Extensions

Ruby

This plugin is highly recommended for its debugging capabilities and general Ruby support.

Rufo

Perfect for formatting your Ruby files (.rb). It’s a great alternative if you prefer not to use Rubocop.

ERB Formatter/Beautify

Essential for formatting .html.erb files.

Simple Ruby ERB

Provides syntax highlighting and other features for .html.erb files.

ERB Commenter (bonus)

Not mandatory, this plugin can significantly streamline your workflow. It allows the VSCode comment command to work as expected with .html.erb files, making it easier to comment out sections of your code.

Great! Now that we’ve installed all the necessary extensions and a few extras, let’s configure Visual Studio Code to recognize and properly format our ERB files.

To do this, we’ll need to make some changes to the settings.json file. Here’s what you’ll need to add:

Settings.json

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

These settings instruct Visual Studio Code on how to handle files with specific extensions. In this case, we’re telling VSCode to treat files ending in .erb and .html.erb as HTML and ERB files, respectively.

Moreover, we’re setting the default formatter for ERB files to use the vscode-erb-beautify extension. This will automatically format your ERB files whenever you save them, ensuring your code is always clean and readable.

And that’s it! With these settings in place, you’re all set to start coding with ERB files in Visual Studio Code.

Problems?

If you’re still encountering issues, you may need to install the htmlbeautifier gem. You can do this by running the following command in your terminal
- gem install htmlbeautifier
If you’re experiencing errors with the ERB Formatter/Beautify plugin, it may be due to your Ruby version. The plugin requires Ruby 3.3.0 or higher. If you’re not already using this version, you’ll need to install it.

Conclusion

In the world of web development, working with .html.erb files in Ruby on Rails has its challenges. From syntax highlighting to auto-formatting, finding the right tools to make coding smoother and more efficient is essential.

In this article, we’ve explored the issues front-end developers face when working with .html.erb files and provided a comprehensive solution to make your coding experience more enjoyable. By leveraging a set of VSCode extensions and configuring your settings, you can now enjoy both syntax highlighting and auto-formatting for your .html.erb files.

With these tools in hand, you can focus more on writing clean, efficient code and less on tedious formatting tasks.

Happy coding! 🚀

References

We want to work with you. Check out our "What We Do" section!