Preprocessor to support .html.erb files (Ruby on Rails, ERB)

[Splines]

Hey there, thanks so much for creating this tool. I'm wondering how all the people programmed HTML all those years without a proper HTML linter? Like as if the W3C Validator is one of the top results when I search for "HTML linter" on the web 😂

---

I'd like to lint the HTML part of .html.erb files. ERB is a templating language used in Ruby on Rails projects. In order to lint .js.erb files, I've written a custom ESLint plugin, which is essentially a preprocessor (and then also a postprocessor) to strip away all the ERB parts in the code (replacing them with a dummy comment), while keeping track of the positions to correctly map line and colon numbers of ESLint messages. Here's what you can achieve with it (image should be animated):

I was wondering if your project also supports some kind of mechanism such that I could use this preprocessor again (maybe with only slight changes) for .html.erb files. The recommended ESLint configuration basically just declares the processor.

This would allow me to lint the HTML part of these files. I would then use a tool like ERB Lint to lint the ERB parts.

[yeonjuan]

@Splines hello. Thanks for the suggestion, I agree with adding a preprocessor. However, I am not very familiar with ERB, so if I were to implement it, it might take some time. I will refer to the code you shared. Thank you.

[Splines]

Hey, I noticed that I didn't have too much work to do to support html-eslint with my processor. So I'm happy to announce that with my new release 2.1.0, you can now also lint .html.erb files with it 🙌

---

Keep in mind that it comes with the same caveats like the JS linting with my processor, i.e.

<%= if @var %>
  <div class="foo" data-foo="bar">
    <p>Hello</p>
  </div>
<% end %>

will be autocorrected to

<%= if @var %>
<div class="foo" data-foo="bar">
  <p>Hello</p>
</div>
<% end %>

But this is something I can live with and it motivates to outsource more logic to Rails helpers or to do more logic in Rails in general ;)

[Splines]

@yeonjuan I recently stumbled on this case where my plugin currently fails to provide reasonable output. Assume this HTML code (referred to as [1]):

<button id="nice"
  <% if current_user.admin? %>
  class="btn-admin"
  <% end %>
</button>

What my plugin gives to html-eslint is then (we denote this by [2]):

<button id="nice"
  <!-- 566513c5d83ac26e15414f2754 0 -->
  class="btn-admin"
  <!-- 566513c5d83ac26e15414f2754 1 -->
</button>

Linting this with the following setting:

"@html-eslint/sort-attrs": "error",

will produce invalid code. I cannot expect you to lint [2] properly, since it isn't even valid HTML: in an attribute list, no comments are allowed. Would it still be possible to tailor for this special case? Or do you have a better idea for what I could use as replacement string?

[yeonjuan]

Hi1 @Splines This is probably a similar issue to #231.
I realize that in the real world it's rare to use purely HTML, as in the example you wrote. There are many different template engines that work with HTML.
I've been thinking about how to support many different kinds of template engines. And I'm thinking that perhaps we should handle this at the parser level, like we did for JavaScript Template Literal.
I plan to look at this in February. I don't have a clear direction yet, so if you have any ideas, please share. Thanks!

[yeonjuan]

Hi, @@Splines
I've been working on covering the template engine syntax, and I'm happy to announce that development is almost complete and an alpha version has been released.

npm install -D @html-eslint/[email protected] @html-eslint/[email protected]

import eslintHTML from "@html-eslint/eslint-plugin";
import eslintHTMLParser, { TEMPLATE_ENGINE_SYNTAX } from "@html-eslint/parser";

export default [

  {
    "files": ["**/*.html"],
    "languageOptions": {
      parser: eslintHTMLParser,
      parserOptions: {
        templateEngineSyntax: TEMPLATE_ENGINE_SYNTAX.ERB // Configuration for ERB
      }
    },
    "plugins": {
      "@html-eslint": eslintHTML,
    },
    "rules": {
     "@html-eslint/sort-attrs": ["error"]
    }
},
]

[Splines]

@yeonjuan Wow, that was quick, thanks a lot, I will give it a try this week.