Roadmap

Milestone 1.5 (Completed)

@eslint-react/eslint-plugin

Core Rules

RuleDescription
ensure-forward-ref-using-refRequires that components wrapped with forwardRef must have a ref parameter.
no-access-state-in-setstatePrevents accessing this.state inside setState calls.
no-array-index-keyWarns when an array index is used as a key prop.
no-children-countPrevents usage of Children.count.
no-children-for-eachPrevents usage of Children.forEach.
no-children-mapPrevents usage of Children.map.
no-children-onlyPrevents usage of Children.only.
no-children-propPrevents usage of children as a prop.
no-children-to-arrayPrevents usage of Children.toArray.
no-class-componentPrevents usage of class component.
no-clone-elementPrevents usage of cloneElement.
no-comment-textnodesPrevents comments from being inserted as text nodes.
no-complicated-conditional-renderingPrevents complicated conditional rendering in JSX.
no-component-will-mountPrevents usage of componentWillMount.
no-component-will-receive-propsPrevents usage of componentWillReceiveProps.
no-component-will-updatePrevents usage of componentWillUpdate.
no-create-refPrevents usage of createRef.
no-direct-mutation-statePrevents direct mutation of this.state.
no-duplicate-keyPrevents duplicate key props on elements in the same array or a list of children.
no-implicit-keyPrevents key prop from not being explicitly specified (e.g. spreading key prop from objects).
no-leaked-conditional-renderingPrevents problematic leaked values from being rendered.
no-missing-component-display-nameEnforces that all components have a displayName which can be used in devtools.
no-missing-keyPrevents missing key prop on items in list rendering.
no-nested-componentsPrevents nesting component definitions inside other components.
no-redundant-should-component-updatePrevents usage of shouldComponentUpdate when extending React.PureComponent.
no-set-state-in-component-did-mountDisallows calling this.setState in componentDidMount outside of functions, such as callbacks.
no-set-state-in-component-did-updateDisallows calling this.setState in componentDidUpdate outside of functions, such as callbacks.
no-set-state-in-component-will-updateDisallows calling this.setState in componentWillUpdate outside of functions, such as callbacks.
no-string-refsDisallows using deprecated string refs.
no-unsafe-component-will-mountWarns usage of UNSAFE_componentWillMount in class components.
no-unsafe-component-will-receive-propsWarns usage of UNSAFE_componentWillReceiveProps in class components.
no-unsafe-component-will-updateWarns usage of UNSAFE_componentWillUpdate in class components.
no-unstable-context-valuePrevents non-stable values (i.e. object literals) from being used as a value for Context.Provider.
no-unstable-default-propsPrevents usage of referential-type values as default props in object destructuring.
no-unused-class-component-membersWarns unused class component methods and properties.
no-unused-stateWarns unused class component state.
no-useless-fragmentPrevents the use of useless fragment components or <> syntax.
prefer-destructuring-assignmentEnforces the use of destructuring assignment over property assignment.
prefer-shorthand-booleanEnforces the use of shorthand syntax for boolean attributes.
prefer-shorthand-fragmentEnforces the use of shorthand syntax for fragments.

DOM Rules

RuleDescription
dom/no-children-in-void-dom-elementsPrevents the use of children in void DOM elements.
dom/no-dangerously-set-innerhtmlPrevents DOM element using dangerouslySetInnerHTML.
dom/no-dangerously-set-innerhtml-with-childrenPrevents DOM element using dangerouslySetInnerHTML and children at the same time.
dom/no-find-dom-nodePrevents usage of findDOMNode.
dom/no-missing-button-typeEnforces explicit button type attribute for <button> elements.
dom/no-missing-iframe-sandboxEnforces explicit sandbox attribute for iframe elements.
dom/no-namespaceEnforces the absence of a namespace in React elements.
dom/no-render-return-valuePrevents usage of the return value of ReactDOM.render.
dom/no-script-urlPrevents usage of javascript: URLs as the value of certain attributes.
dom/no-unsafe-iframe-sandboxEnforces sandbox attribute for iframe elements is not set to unsafe combinations.
dom/no-unsafe-target-blankPrevents the use of target="_blank" without rel="noreferrer noopener".

Hooks Extra Rules

RuleDescription
hooks-extra/ensure-custom-hooks-using-other-hooksWarns when custom Hooks that don’t use other Hooks.
hooks-extra/ensure-use-callback-has-non-empty-depsWarns when useCallback is called with empty dependencies array.
hooks-extra/ensure-use-memo-has-non-empty-depsWarns when useMemo is called with empty dependencies array.
hooks-extra/prefer-use-state-lazy-initializationWarns function calls made inside useState calls.

Naming Convention Rules

RuleDescription
naming-convention/component-nameEnforces naming conventions for components.
naming-convention/filenameEnforces naming convention for JSX files.
naming-convention/filename-extensionEnforces consistent use of the JSX file extension.
naming-convention/use-stateEnforces destructuring and symmetric naming of useState hook value and setter variables.

Milestone 2.0 (Active)

Plugins (with ecological niche explanation)

  • eslint-plugin-react-x (DOM Irrelevant, Render Target Agnostic, Formatting Independent)
  • eslint-plugin-react-dom (DOM Specific rules for React DOM).
  • eslint-plugin-react-hooks (The official one from React)
  • eslint-plugin-react-hooks-extra (Extra rules for eslint-plugin-react-hooks)
  • eslint-plugin-react-naming-convention (Optional, only naming convention rules, can be replaced with other plugins depending on the project)
  • … (Free to combine with other plugins from the community)

Rules in eslint-plugin-react-x

RuleDescription
ensure-forward-ref-using-refRequires that components wrapped with forwardRef must have a ref parameter.
no-access-state-in-setstatePrevents accessing this.state inside setState calls.
no-array-index-keyWarns when an array index is used as a key prop.
no-children-countPrevents usage of Children.count.
no-children-for-eachPrevents usage of Children.forEach.
no-children-mapPrevents usage of Children.map.
no-children-onlyPrevents usage of Children.only.
no-children-propPrevents usage of children as a prop.
no-children-to-arrayPrevents usage of Children.toArray.
no-class-componentPrevents usage of class component.
no-clone-elementPrevents usage of cloneElement.
no-comment-textnodesPrevents comments from being inserted as text nodes.
no-complicated-conditional-renderingPrevents complicated conditional rendering in JSX.
no-component-will-mountPrevents usage of componentWillMount.
no-component-will-receive-propsPrevents usage of componentWillReceiveProps.
no-component-will-updatePrevents usage of componentWillUpdate.
no-create-refPrevents usage of createRef.
no-direct-mutation-statePrevents direct mutation of this.state.
no-duplicate-keyPrevents duplicate key props on elements in the same array or a list of children.
no-implicit-keyPrevents key prop from not being explicitly specified (e.g. spreading key prop from objects).
no-leaked-conditional-renderingPrevents problematic leaked values from being rendered.
no-missing-component-display-nameEnforces that all components have a displayName which can be used in devtools.
no-missing-keyPrevents missing key prop on items in list rendering.
no-nested-componentsPrevents nesting component definitions inside other components.
no-redundant-should-component-updatePrevents usage of shouldComponentUpdate when extending React.PureComponent.
no-set-state-in-component-did-mountDisallows calling this.setState in componentDidMount outside of functions, such as callbacks.
no-set-state-in-component-did-updateDisallows calling this.setState in componentDidUpdate outside of functions, such as callbacks.
no-set-state-in-component-will-updateDisallows calling this.setState in componentWillUpdate outside of functions, such as callbacks.
no-string-refsDisallows using deprecated string refs.
no-unsafe-component-will-mountWarns usage of UNSAFE_componentWillMount in class components.
no-unsafe-component-will-receive-propsWarns usage of UNSAFE_componentWillReceiveProps in class components.
no-unsafe-component-will-updateWarns usage of UNSAFE_componentWillUpdate in class components.
no-unstable-context-valuePrevents non-stable values (i.e. object literals) from being used as a value for Context.Provider.
no-unstable-default-propsPrevents usage of referential-type values as default props in object destructuring.
no-unused-class-component-membersWarns unused class component methods and properties.
no-unused-stateWarns unused class component state.
no-useless-fragmentPrevents the use of useless fragment components or <> syntax.
prefer-destructuring-assignmentEnforces the use of destructuring assignment over property assignment.
prefer-shorthand-booleanEnforces the use of shorthand syntax for boolean attributes.
prefer-shorthand-fragmentEnforces the use of shorthand syntax for fragments.

Rules in eslint-plugin-react-dom

RuleDescription
no-children-in-void-dom-elementsPrevents the use of children in void DOM elements.
no-dangerously-set-innerhtmlPrevents DOM element using dangerouslySetInnerHTML.
no-dangerously-set-innerhtml-with-childrenPrevents DOM element using dangerouslySetInnerHTML and children at the same time.
no-find-dom-nodePrevents usage of findDOMNode.
no-missing-button-typeEnforces explicit button type attribute for <button> elements.
no-missing-iframe-sandboxEnforces explicit sandbox attribute for iframe elements.
no-namespaceEnforces the absence of a namespace in React elements.
no-render-return-valuePrevents usage of the return value of ReactDOM.render.
no-script-urlPrevents usage of javascript: URLs as the value of certain attributes.
no-unsafe-iframe-sandboxEnforces sandbox attribute for iframe elements is not set to unsafe combinations.
no-unsafe-target-blankPrevents the use of target="_blank" without rel="noreferrer noopener".

Rules in eslint-plugin-react-hooks-extra

RuleDescription
ensure-custom-hooks-using-other-hooksWarns when custom Hooks that don’t use other Hooks.
ensure-use-callback-has-non-empty-depsWarns when useCallback is called with empty dependencies array.
ensure-use-memo-has-non-empty-depsWarns when useMemo is called with empty dependencies array.
prefer-use-state-lazy-initializationWarns function calls made inside useState calls.

Rules in eslint-plugin-react-naming-convention

RuleDescription
component-nameEnforces naming conventions for components.
filenameEnforces naming convention for JSX files.
filename-extensionEnforces consistent use of the JSX file extension.
use-stateEnforces destructuring and symmetric naming of useState hook value and setter variables.

Milestone 3.0 (Draft)

Plugins (with ecological niche explanation)

  • eslint-plugin-react-x (DOM Irrelevant, Render Target Agnostic, Formatting Independent)
  • eslint-plugin-react-dom (DOM Specific rules for React DOM).
  • eslint-plugin-react-dom-a11y (Accessibility rules for React DOM).
  • eslint-plugin-react-web-api (Web API rules for React).
  • eslint-plugin-react-hooks (The official one from React)
  • eslint-plugin-react-hooks-extra (Extra rules for eslint-plugin-react-hooks)
  • eslint-plugin-react-naming-convention (Optional, only naming convention rules, can be replaced with other plugins depending on the project)
  • … (Free to combine with other plugins from the community)

Rules in eslint-plugin-react-dom-a11y (port open-wc’s a11y rules)

RuleDescription
alt-textEnforce that all elements that require alternative text have meaningful information to relay back to the end user.
anchor-has-contentEnforce that anchors have content and that the content is accessible to screen readers.
anchor-is-validPerforms validity check on anchor hrefs. Warns when anchors are used as buttons.
aria-activedescendant-has-tabindexEnforce that an element with aria-activedescendant has a tabindex.
aria-attr-valid-valueARIA state and property values must be valid.
aria-attrsElements cannot use an invalid ARIA attribute. This will fail if it finds an aria-* property that is not listed in WAI-ARIA States and Properties spec.
aria-roleElements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at WAI-ARIA site.
aria-unsupported-elementsEnforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
autocomplete-validEnsure the autocomplete attribute is correct and suitable for the form field it is used with.
click-events-have-key-eventsEnforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress.
heading-has-contentEnforce that heading elements (h1, h2, etc.) have content and that the content is accessible to screen readers.
iframe-title<iframe> elements must have a unique title property to indicate its content to the user.
img-redundant-altEnforce img alt attribute does not contain the words image, picture, or photo.
mouse-events-have-key-eventsEnforce onMouseover/onMouseout are accompanied by onFocus/onBlur.
no-access-keyEnforce no accesskey attribute on element.
no-autofocusEnforce that autofocus attribute is not used on elements.
no-distracting-elementsEnforces that no distracting <marquee> or <blink> elements are used.
no-redundant-roleEnforce explicit role property is not the same as implicit/default role property on element.
role-has-required-aria-attrsEnforce that elements with ARIA roles must have all required attributes for that role.
role-supports-aria-attrEnforce that elements with a defined role contain only supported ARIA attributes for that role.
scopeEnforce scope attribute is only used on <th> elements.
tabindex-no-positiveEnforce tabIndex value is not greater than zero.
valid-langEnforce the lang attribute on the html element. The lang attribute will only be populated with a value that’s BCP 47 compliant