Roadmap
Milestone 2.0
Plugins (with ecological niche explanation)
eslint-plugin-react-x- Core rules (renderer-agnostic, compatible with x-platform).eslint-plugin-react-dom- DOM Specific rules for React DOM.eslint-plugin-react-web-api- Rules for interacting with Web APIs.eslint-plugin-react-hooks- The official one from React.eslint-plugin-react-hooks-extra- Extra rules foreslint-plugin-react-hooks.eslint-plugin-react-naming-convention- Optional naming convention rules (can be replaced with other plugins depending on the project).
Rules in eslint-plugin-react-x
| Rule | Description |
|---|---|
avoid-shorthand-boolean | Prevents using shorthand syntax for boolean attributes. |
avoid-shorthand-fragment | Prevents using shorthand syntax for fragments. |
ensure-forward-ref-using-ref | Requires that components wrapped with forwardRef must have a ref parameter. |
no-access-state-in-setstate | Prevents accessing this.state inside setState calls. |
no-array-index-key | Prevents using array index as key. |
no-children-count | Prevents using Children.count. |
no-children-for-each | Prevents using Children.forEach. |
no-children-map | Prevents using Children.map. |
no-children-only | Prevents using Children.only. |
no-children-prop | Prevents using children as a prop. |
no-children-to-array | Prevents using Children.toArray. |
no-class-component | Prevents using class component. |
no-clone-element | Prevents using cloneElement. |
no-comment-textnodes | Prevents comments from being inserted as text nodes. |
no-complex-conditional-rendering | Prevents complex conditional rendering in JSX. |
no-component-will-mount | Prevents using componentWillMount. |
no-component-will-receive-props | Prevents using componentWillReceiveProps. |
no-component-will-update | Prevents using componentWillUpdate. |
no-create-ref | Prevents using createRef. |
no-default-props | Prevents using defaultProps property in favor of ES6 default parameters. |
no-direct-mutation-state | Prevents direct mutation of this.state. |
no-duplicate-key | Prevents duplicate key on elements in the same array or a list of children. |
no-implicit-key | Prevents key from not being explicitly specified (e.g. spreading key from objects). |
no-leaked-conditional-rendering | Prevents problematic leaked values from being rendered. |
no-missing-component-display-name | Enforces that all components have a displayName which can be used in devtools. |
no-missing-key | Prevents missing key on items in list rendering. |
no-nested-components | Prevents nesting component definitions inside other components. |
no-prop-types | Prevents using propTypes in favor of TypeScript or another type-checking solution. |
no-redundant-should-component-update | Prevents using shouldComponentUpdate when extending React.PureComponent. |
no-set-state-in-component-did-mount | Prevents calling this.setState in componentDidMount outside of functions, such as callbacks. |
no-set-state-in-component-did-update | Prevents calling this.setState in componentDidUpdate outside of functions, such as callbacks. |
no-set-state-in-component-will-update | Prevents calling this.setState in componentWillUpdate outside of functions, such as callbacks. |
no-string-refs | Prevents using deprecated string refs. |
no-unsafe-component-will-mount | Warns the usage of UNSAFE_componentWillMount in class components. |
no-unsafe-component-will-receive-props | Warns the usage of UNSAFE_componentWillReceiveProps in class components. |
no-unsafe-component-will-update | Warns the usage of UNSAFE_componentWillUpdate in class components. |
no-unstable-context-value | Prevents non-stable values (i.e. object literals) from being used as a value for Context.Provider. |
no-unstable-default-props | Prevents using referential-type values as default props in object destructuring. |
no-unused-class-component-members | Warns unused class component methods and properties. |
no-unused-state | Warns unused class component state. |
no-useless-fragment | Prevents using useless fragment components or <> syntax. |
prefer-destructuring-assignment | Enforces using destructuring assignment over property assignment. |
prefer-read-only-props | Enforce read-only props in components. |
prefer-shorthand-boolean | Enforces using shorthand syntax for boolean attributes. |
prefer-shorthand-fragment | Enforces using shorthand syntax for fragments. |
Rules in eslint-plugin-react-dom
| Rule | Description |
|---|---|
no-children-in-void-dom-elements | Prevents the use of children in void DOM elements. |
no-dangerously-set-innerhtml | Prevents DOM element using dangerouslySetInnerHTML. |
no-dangerously-set-innerhtml-with-children | Prevents DOM element using dangerouslySetInnerHTML and children at the same time. |
no-find-dom-node | Prevents usage of findDOMNode. |
no-missing-button-type | Enforces explicit type attribute for <button> elements. |
no-missing-iframe-sandbox | Enforces explicit sandbox attribute for iframe elements. |
no-namespace | Enforces the absence of a namespace in React elements. |
no-render-return-value | Prevents usage of the return value of ReactDOM.render. |
no-script-url | Prevents usage of javascript: URLs as the value of certain attributes. |
no-unsafe-iframe-sandbox | Enforces sandbox attribute for iframe elements is not set to unsafe combinations. |
no-unsafe-target-blank | Prevents the use of target="_blank" without rel="noreferrer noopener". |
Rules in eslint-plugin-react-web-api
| Rule | Description |
|---|---|
no-leaked-timeout | Prevents leaked setTimeout |
no-leaked-interval | Prevents leaked setInterval |
no-leaked-idle-callback | Prevents leaked requestIdleCallback |
no-leaked-animation-frame | Prevents leaked requestAnimationFrame |
no-leaked-event-source | Prevents leaked EventSource |
no-leaked-event-listener | Prevents leaked addEventListener |
no-leaked-resize-observer | Prevents leaked ResizeObserver |
no-leaked-intersection-observer | Prevents leaked IntersectionObserver |
no-leaked-mutation-observer | Prevents leaked MutationObserver |
no-leaked-performance-observer | Prevents leaked PerformanceObserver |
no-leaked-websocket | Prevents leaked WebSocket |
no-leaked-broadcast-channel | Prevents leaked BroadcastChannel |
no-leaked-geolocation | Prevents leaked Geolocation.watchPosition() |
no-leaked-absolute-orientation-sensor | Prevents leaked AbsoluteOrientationSensor |
no-leaked-relative-accelerometer | Prevents leaked Accelerometer |
no-leaked-ambient-light-sensor | Prevents leaked AmbientLightSensor |
no-leaked-gravity-sensor | Prevents leaked GravitySensor |
no-leaked-gyroscope | Prevents leaked Gyroscope |
no-leaked-linear-acceleration-sensor | Prevents leaked LinearAccelerationSensor |
no-leaked-magnetometer | Prevents leaked Magnetometer |
no-leaked-orientation-sensor | Prevents leaked OrientationSensor |
Rules in eslint-plugin-react-hooks-extra
| Rule | Description |
|---|---|
no-direct-set-state-in-use-effect | Disallow direct calls to set function of useState in useEffect. |
no-redundant-custom-hook | Warns when custom Hooks that don’t use other Hooks. |
no-unnecessary-use-callback | Disallow unnecessary usage of useCallback. |
no-unnecessary-use-memo | Disallow unnecessary usage of useMemo. |
prefer-use-state-lazy-initialization | Warns function calls made inside useState calls. |
Rules in eslint-plugin-react-naming-convention
| Rule | Description |
|---|---|
component-name | Enforces naming conventions for components. |
filename | Enforces naming convention for JSX files. |
filename-extension | Enforces consistent use of the JSX file extension. |
use-state | Enforces destructuring and symmetric naming of useState hook value and setter variables. |
Advanced Configuration features
- Additional components (
settings["react-x"].additionalComponents) transitions from experimental to stable.
Milestone 3.0 (Draft)
Plugins (with ecological niche explanation)
eslint-plugin-react-x- Core rules (renderer-agnostic, compatible with x-platform).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- Rules for interacting with Web APIs.eslint-plugin-react-hooks- The official one from React.eslint-plugin-react-hooks-extra- Extra rules foreslint-plugin-react-hooks.eslint-plugin-react-naming-convention- Optional naming convention rules (can be replaced with other plugins depending on the project).- … (Free to combine with other plugins from the community).
Additional context
Rules in eslint-plugin-react-dom-a11y (if port Svelte’s Accessibility warnings)
| Rule | Description |
|---|---|
accesskey | Enforce no accesskey on element. |
aria-activedescendant-has-tabindex | Enforce aria-activedescendant has tabindex. |
aria-props | Enforce valid aria-* props. |
autofocus | Enforce no autofocus on element. |
click-events-have-key-events | Enforce elements with click handlers must have key handlers. |
distracting-elements | Enforce no distracting elements. |
hidden | Enforce no hidden on element. |
img-redundant-alt | Enforce img alt attribute does not contain the word image, picture, or photo. |
incorrect-aria-attribute-type | Enforce correct aria-* attribute type. |
invalid-attribute | Enforce no invalid attribute. |
interactive-supports-focus | Enforce interactive elements support focus. |
label-has-associated-control | Enforce label has associated control. |
media-has-caption | Enforce media elements have captions. |
misplaced-role | Enforce no misplaced role. |
misplaced-scope | Enforce no misplaced scope. |
missing-attribute | Enforce that attributes required for accessibility are present on an element. |
missing-content | Enforce that heading elements (h1, h2, etc.) and anchors have content and that the content is accessible to screen readers. |
mouse-events-have-key-events | Enforce elements with mouse handlers must have key handlers. |
no-redundant-roles | Enforce no redundant roles. |
no-interactive-element-to-noninteractive-role | Enforce no interactive element to non-interactive role. |
no-noninteractive-element-interactions | Enforce no non-interactive element interactions. |
no-noninteractive-element-to-interactive-role | Enforce no non-interactive element to interactive role. |
no-noninteractive-tabindex | Enforce no non-interactive tabindex. |
no-static-element-interactions | Enforce no static element interactions. |
positive-tabindex | Enforce no positive tabindex property values. |
role-has-required-aria-props | Enforce role has required aria-* props. |
role-supports-aria-props | Enforce role supports aria-* props. |
structure | Enforce correct structure. |
unknown-aria-attribute | Enforce no unknown aria-* attribute. |
unknown-role | Enforce no unknown role. |
Rules in eslint-plugin-react-dom-a11y (if port open-wc’s a11y rules)
| Rule | Description |
|---|---|
alt-text | Enforce that all elements that require alternative text have meaningful information to relay back to the end user. |
anchor-has-content | Enforce that anchors have content and that the content is accessible to screen readers. |
anchor-is-valid | Performs validity check on anchor hrefs. Warns when anchors are used as buttons. |
aria-activedescendant-has-tabindex | Enforce that an element with aria-activedescendant has a tabindex. |
aria-attr-valid-value | ARIA state and property values must be valid. |
aria-attrs | Elements 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-role | Elements 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-elements | Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes. |
autocomplete-valid | Ensure the autocomplete attribute is correct and suitable for the form field it is used with. |
click-events-have-key-events | Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress. |
heading-has-content | Enforce 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-alt | Enforce img alt attribute does not contain the words image, picture, or photo. |
mouse-events-have-key-events | Enforce onMouseover/onMouseout are accompanied by onFocus/onBlur. |
no-access-key | Enforce no accesskey attribute on element. |
no-autofocus | Enforce that autofocus attribute is not used on elements. |
no-distracting-elements | Enforces that no distracting <marquee> or <blink> elements are used. |
no-redundant-role | Enforce explicit role property is not the same as implicit/default role property on element. |
role-has-required-aria-attrs | Enforce that elements with ARIA roles must have all required attributes for that role. |
role-supports-aria-attr | Enforce that elements with a defined role contain only supported ARIA attributes for that role. |
scope | Enforce scope attribute is only used on <th> elements. |
tabindex-no-positive | Enforce tabIndex value is not greater than zero. |
valid-lang | Enforce the lang attribute on the html element. The lang attribute will only be populated with a value that’s BCP 47 compliant |