yeonjuan
[FEATURE] Add support for checking if attribute values are valid
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!
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.
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.
This is identical to https://html-validate.org/rules/attribute-allowed-values.html.
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?
@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?