[New] add no-invalid-html-attribute rule

Co-authored-by: Sebastian Malton <[email protected]>
Co-authored-by: Jordan Harband <[email protected]>

Author: Nokel81

CHANGELOG.md

@@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`no-unused-class-component-methods`]: Handle unused class component methods ([#2166][] @jakeleventhal @pawelnvk)
 * add [`no-arrow-function-lifecycle`] ([#1980][] @ngtan)
 * add support for `@typescript-eslint/parser` v5 (@ljharb)
+* [`no-invalid-html-attribute`]: add rule ([#2863][] @Nokel81)
 
 ### Fixed
 * `propTypes`: add `VoidFunctionComponent` to react generic list ([#3092][] @vedadeepta)
@@ -30,6 +31,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 [#3110]: https://github.com/yannickcr/eslint-plugin-react/pull/3110
 [#3102]: https://github.com/yannickcr/eslint-plugin-react/issue/3102
 [#3092]: https://github.com/yannickcr/eslint-plugin-react/pull/3092
+[#2863]: https://github.com/yannickcr/eslint-plugin-react/pull/2863
 [#2166]: https://github.com/yannickcr/eslint-plugin-react/pull/2166
 [#1980]: https://github.com/yannickcr/eslint-plugin-react/pull/1980
 
@@ -3533,3 +3535,4 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`style-prop-object`]: docs/rules/style-prop-object.md
 [`void-dom-elements-no-children`]: docs/rules/void-dom-elements-no-children.md
 [`wrap-multilines`]: docs/rules/jsx-wrap-multilines.md
+[`no-invalid-html-attribute`]: docs/rules/no-invalid-html-attribute.md

README.md

@@ -144,6 +144,7 @@ Enable the rules that you would like to use.
 |  |  | [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md) | Prevent usage of setState in componentDidUpdate |
 | ✔ |  | [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md) | Prevent direct mutation of this.state |
 | ✔ |  | [react/no-find-dom-node](docs/rules/no-find-dom-node.md) | Prevent usage of findDOMNode |
+|  | 🔧 | [react/no-invalid-html-attribute](docs/rules/no-invalid-html-attribute.md) | Forbid attribute with an invalid values` |
 | ✔ |  | [react/no-is-mounted](docs/rules/no-is-mounted.md) | Prevent usage of isMounted |
 |  |  | [react/no-multi-comp](docs/rules/no-multi-comp.md) | Prevent multiple component definition per file |
 |  |  | [react/no-namespace](docs/rules/no-namespace.md) | Enforce that namespaces are not used in React elements |

docs/rules/no-invalid-html-attribute.md

@@ -0,0 +1,17 @@
+# Prevent usage of invalid attributes (react/no-invalid-html-attribute)
+
+Some HTML elements have a specific set of valid values for some attributes.
+For instance the elements: `a`, `area`, `link`, or `form` all have an attribute called `rel`.
+There is a fixed list of values that have any meaning for this attribute on these tags (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)).
+To help with minimizing confusion while reading code, only the appropriate values should be on each attribute.
+
+## Rule Details
+
+This rule aims to remove invalid attribute values.
+
+## Rule Options
+The options is a list of attributes to check. Defaults to `["rel"]`.
+
+## When Not To Use It
+
+When you don't want to enforce attribute value correctness.

index.js

@@ -54,6 +54,7 @@ const allRules = {
   'jsx-uses-react': require('./lib/rules/jsx-uses-react'),
   'jsx-uses-vars': require('./lib/rules/jsx-uses-vars'),
   'jsx-wrap-multilines': require('./lib/rules/jsx-wrap-multilines'),
+  'no-invalid-html-attribute': require('./lib/rules/no-invalid-html-attribute'),
   'no-access-state-in-setstate': require('./lib/rules/no-access-state-in-setstate'),
   'no-adjacent-inline-elements': require('./lib/rules/no-adjacent-inline-elements'),
   'no-array-index-key': require('./lib/rules/no-array-index-key'),