Linting ERB Templates with @linthtml

[elia]

On one of the last projects in which we used ViewComponent I didn't have much luck integrating erb-lint and instead we rolled our own configuration based on @linthtml. That should be one of the most popular linters on NPM.

I just extracted it into its own gem: https://github.com/nebulab/erb-linter#readme and would love to hear some feedback and advice, also contributions! ✨
The installation is pretty simple and just requires installing @linthtml and adding a configuration (an example here).

This setup will catch pretty reliably and bad indentation, banned attributes, missing or wrong closing tags etc.
It won't, for now, check your ruby code, but the underpinnings are there and it should be pretty simple to integrate Rubocop and enforce some consistency around it, including spacing inside the ERB tags etc.

---

How it work

The main thing it does is turning this ERB:

<div>
  <% if @foo == :bar %>
    <%= image_tag(item[:value], alt: item[:value]) %>
  <% elsif @type == :other %>
    <span><%= item[:value] %></span>
  <% else %>
    <% raise "unknown type" %>
  <% end %>
</div>

into this HTML:

<div>
  <erb silent erb-code=" if @foo == :bar ">
    <erb loud erb-code=" image_tag(item[:value], alt: item[:value]) "></erb>
  </erb>
  <erb silent erb-code=" elsif @type == :other ">
    <span><erb loud erb-code=" item[:value] "></erb></span>
  </erb>
  <erb silent erb-code=" else ">
    <erb silent erb-code=" raise &quot;unknown type&quot; "></erb>
  </erb>
</div>

From there you can see how it's easy to apply any HTML linter on earth 😊