[FEATURE] Add support for checking if attribute values are valid

[reteps]

Is your feature request related to a problem? Please describe.

I have code like this:

<element attr="bar"></element>
<element attr="foo"></element>

And I know that the valid set of attributes for element is [bar, baz]. Emitting a warning on an invalid attribute would be great! Since this seems tricky to do for HTML attributes by default, I would propose a rule that lets you configure this set per attribute and element (perhaps if elements is not present, it applies to all elements).

validAttrs: {
attr: { values: ["bar", "foo"], elements: ["element"] }
}

One edge case to be aware of is that if the attribute value contains a templating expression, it should be ignored.

<element attr="{{ dynamic_val }}"></element>

Thank you so much for this plugin!

[yeonjuan]

hello. @reteps Thank you for your suggestion.
I have a question just to confirm. The rule you proposed is expected to work as follows. Is this correct?

• Check if valid attributes are used for the tag according to the html spec
• Allow custom attributes via options.

[reteps]

That's correct -- both pieces of this would be helpful.

Check if valid attributes are used for the tag according to the html spec

This sounds hard, but I would be excited to see something working for this! It would help our linting a lot.

Allow custom attributes via options.

This was my original proposal.

[reteps]

This is identical to https://html-validate.org/rules/attribute-allowed-values.html.

[yeonjuan]

@reteps I agree to this proposal. I think it's a useful rule.

[reteps]

It looks like this is the same as https://github.com/jsx-eslint/eslint-plugin-react/blob/master/lib/rules/no-invalid-html-attribute.js. Perhaps this rule isn't needed then / can be copied?

[yeonjuan]

@reteps
Yes! I think we can copy the code and make it work with the HTML AST. Thank you for suggesting a good starting point. Are you going to open a PR yourself?

[reteps]

I am not planning to.

[yeonjuan]

Ok! let me try to implement this rule. 👍