Linter: Diagnostic issue: `html-no-duplicate-ids`

[mguidetti]

Line: 33
Diagnostic: Duplicate ID option--<%= opt[:id] %> found. IDs must be unique within a document.
Severity: Error

File Content:
Please paste your HTML ERB file content below to help us reproduce the issue:

<% grouped_options.second.each do |opt| %>
  <div id="option--<%= opt[:id] %>">
    ...
  </div>
<% end %>

Problematic Line:

id="option--<%= opt[:id] %>"

Environment:

• VS Code Extension Version: 0.5.0

• VS Code Version: 1.103.1

• Platform: linux

• Node Version: v22.17.0

  Herb Settings:

{
"linter.enabled": true,
"trace.server": "verbose"
}

Additional Context:

This may be a duplicate #273, but want to point out the differences using a dynamically generated id and within an iterator

[marcoroth]

Thanks for reporting @mguidetti! 🙏🏼

These are the kind of false positives I feared in #183 (which is also why it's still open).

I wonder if we should disable the rule for now unless we can be sure that we cover the basic use cases.

[mguidetti]

Ah I missed that other issue, thank you.

Perhaps it's worth adding an exception for examples like this, where the id string is from a dynamic variable and its duplication can't be reliably determined.

[marcoroth]

Hey @mguidetti, I believe this is now fixed with #444 as part of v0.6.1.

Playground:
https://herb-tools.dev/playground?tab=diagnostics&diagnosticsFilter=linter#DwUgBA5gTg9grgBwKYBMD6MEBcCWMB2AzgHSFIDGBKxSAhuQBZgoxgA+mWbYIAfAFBgwwFDgBuYHCgC8AIk558AWiWhpYTgG0AXFIC6PXrIFChxc4OEB6UWIGgwSfCkNA

[mguidetti]

Ah, I see that my initial example didn't fully explain the issue. My apologies. This one is still a problem for me. Here is a better illustration:

<% first_options.each do |opt| %>
  <div id="option--<%= opt[:id] %>">
    ...
  </div>
<% end %>

<% second_options.each do |opt| %>
  <div id="option--<%= opt[:id] %>">
    ...
  </div>
<% end %>

Playground link showing the error: https://herb-tools.dev/playground?tab=diagnostics&diagnosticsFilter=linter#DwUgBAZglgTgzgFwPoHsAOCooHZwHQCmAhgMYAWYAJimAD7oK1ggB8AUGGMJVAG5hRKAXgBEDLNgC0k0ELAMA2gC5BAXWYsR7Tpzx6OXAPQ9e7UGALZKGtm3NwCJHJVQYJ+YuSo16GJqwNuPgFhMTccaVl5DGU1DS0DXX1OYGM+M3BLa1YgA

The issue is that the id is being constructed with the variable opt[:id]. which is potentially unique within its iterator's scope.

The linter can be satisfied by giving the iterators different block variable names, for example:

<% first_options.each do |opt| %>
  <div id="option--<%= opt[:id] %>">
    ...
  </div>
<% end %>

<% second_options.each do |opt_2| %>
  <div id="option--<%= opt_2[:id] %>">
    ...
  </div>
<% end %>

But I'm not sure that's an ideal expectation.

[marcoroth]

Ah, good point, thanks for that context! We need to rework/update that rule then. Ideally we get #406 implemented, which makes the .each easier to differentiate from a regular blocks.