Linter: Add html-no-underscores-in-attribute-names rule to linter

[mickeytgl]

Fixes #405

Introduced a rule to flag HTML attribute names containing underscores and recommend using hyphens instead. Included corresponding tests and updated the default rules list.

[marcoroth]

Hey @mickeytgl, thank you so much for your contribution! This looks great, thank you for giving it a shot!

I recently added a new AttributeVisitorMixin that could allow to simplify the rule but also help to more strategically visit all kind of attribute name setups, since it also handles static/dynamic attribute names.

Sadly I haven't gotten to update all existing rules to use it, but I think it would be really good for this rule to make use of it. Here's an example: html-attribute-double-quotes.

For this rule we could do something like:

import { getStaticAttributeName, getStaticContentFromNodes } from "@herb-tools/core"
import { AttributeVisitorMixin } from "./rule-utils.js"

import type { StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams, DynamicAttributeStaticValueParams, DynamicAttributeDynamicValueParams } from "./rule-utils.js"

class HTMLNoUnderscoresInAttributeNamesVisitor extends AttributeVisitorMixin {
  // <div data-class="value"></div>
  protected checkStaticAttributeStaticValue({ attributeName }: StaticAttributeStaticValueParams) {
    // attributeName => "data-class"
  }

  // <div data-class="<%= class %>"></div>
  protected checkStaticAttributeDynamicValue({ attributeName }: StaticAttributeDynamicValueParams) {
    // attributeName => "data-class"
  }

  // <div data-<%= dynamic %>="class"></div>
  protected checkDynamicAttributeStaticValue({ nameNodes }: DynamicAttributeStaticValueParams) {
    const attributeName = getStaticContentFromNodes(nameNodes)
    // attributeName => "data-"
  }

  // <div data-<%= dynamic %>="<%= dynamic %>"></div>
  protected checkDynamicAttributeDynamicValue({ nameNodes }: DynamicAttributeDynamicValueParams) {
    const attributeName = getStaticContentFromNodes(nameNodes)
    // attributeName => "data-"
  }
}

That would also allow to account for cases like:

<div data_<%= dynamic %>="value"></div>
<div data_<%= dynamic %>_attribute="value"></div>
<div <%= dynamic %>_attribute="value"></div>

Thank you!

[mickeytgl]

@marcoroth I see some failing tests on CI, but I think it's just some flakiness? 🤔 Let me know if I missed something though

[marcoroth]

@mickeytgl I think you just need to run yarn build to build the CLI and then run yarn test -u to update the snapshots in javascript/packages/linter/

[marcoroth]

Thank you for this contribution, @mickeytgl! 🙏🏼