chore: add @html-eslint

[yeonjuan]

What I did

1. Hi! 👋
   I'm a maintainer of the html-eslint plugin, which brings HTML linting support to ESLint.

While exploring this project, I tried applying html-eslint and found that it works well here. This PR adds HTML linting and includes a few fixes based on the results .

If this seems useful, I’d be happy to discuss further or help tune the lint rules for your setup. Would you be interested?

Testing Instructions

1. npm run lint

Notes to Reviewers

• eslint.org - Linting HTML code inside JavaScript template literals

[changeset-bot]

⚠️ No Changeset found

Latest commit: 96e6c85

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	96e6c85
🔍 Latest deploy log	https://app.netlify.com/projects/red-hat-design-system/deploys/682d8ded42cbab00082eb7df
😎 Deploy Preview	https://deploy-preview-2385--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[bennypowers]

looks pretty good. I'm going to add some html stylistic rule config, which should help with @MagRat04's questions about autoformatting

[bennypowers]

@yeonjuan thanks for dropping by. this looks pretty good, and solves some problems for us. I'll probably wait to merge until the number of active PRs calms down a bit.

I'd like to see an indent option that matches the html lsp formatting config, specifically for us we like

• either all attrs on one line
• or the first attr on same line at tag name
  • subsequent attrs vertically aligned with first attr, one per line
  • or with 4 spaces indent

all good:

<a id="hello" class="world" href="#">Content</a>

<a id="hello"
   class="world"
   href="#">Content</a>

or with 4 spaces config:

<a id="hello"
    class="world"
    href="#">Content</a>

[yeonjuan]

@bennypowers

playground

html`
    <div id="1"
        class="1"
      wrongIndent="2"
        onclick="click"
    >
`;

html`<div id="1" class="1" wrongIndent="2" onclick="click">`;

Thank you for the response!
There is no rule that limits the number of attributes per line. While indentation rules are supported, they do not align based on the first attribute as shown in the example above.