Config for React projects.
-
If you haven't already, make sure to install
@code-pushup/eslint-configand its required peer dependencies. -
Since this plugin requires additional peer dependencies, you have to install them as well:
npm install -D eslint-plugin-{jsx-a11y,react,react-hooks} -
Add to your
eslint.config.jsfile:import react from '@code-pushup/eslint-config/react.js'; import tseslint from 'typescript-eslint'; export default tseslint.config(...react);
302 rules are included from javascript config. For brevity, only the 101 additional rules are listed in this document.
🔧 Automatically fixable by the
--fixCLI option.
💡 Manually fixable by editor suggestions.
🧪🚫 Disabled for test files.
🧪⚠️ Severity lessened to warning for test files.
| Plugin | Rule | Options | Autofix | Overrides |
|---|---|---|---|---|
 |
alt-text Enforce all elements that require alternative text have meaningful information to relay back to end user. |
|||
|
anchor-has-content Enforce all anchors to contain accessible content. |
|||
|
anchor-is-valid Enforce all anchors are valid, navigable elements. |
|||
|
aria-activedescendant-has-tabindex Enforce elements with aria-activedescendant are tabbable. |
|||
|
aria-props Enforce all aria-* props are valid. |
|||
|
aria-proptypes Enforce ARIA state and property values are valid. |
|||
|
aria-role Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role. |
|||
|
aria-unsupported-elements Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes. |
|||
|
autocomplete-valid Enforce that autocomplete attributes are used correctly. |
|||
|
click-events-have-key-events Enforce a clickable non-interactive element has at least one keyboard event listener. |
|||
|
heading-has-content Enforce heading ( h1, h2, etc) elements contain accessible content. |
|||
|
html-has-lang Enforce <html> element has lang prop. |
|||
|
iframe-has-title Enforce iframe elements have a title attribute. |
|||
|
img-redundant-alt Enforce <img> alt prop does not contain the word "image", "picture", or "photo". |
|||
|
interactive-supports-focus Enforce that elements with interactive handlers like onClick must be focusable. |
tabbable: button, checkbox,...{
"tabbable": [
"button",
"checkbox",
"link",
"searchbox",
"spinbutton",
"switch",
"textbox"
]
} |
||
|
label-has-associated-control Enforce that a label tag has a text label and an associated control. |
|||
|
media-has-caption Enforces that <audio> and <video> elements must have a <track> for captions. |
|||
|
mouse-events-have-key-events Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for keyboard-only users. |
|||
|
no-access-key Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screen reader. |
|||
|
no-distracting-elements Enforce distracting elements are not used. |
|||
|
no-interactive-element-to-noninteractive-role Interactive elements should not be assigned non-interactive roles. |
tr: none, presentation, can...{
"tr": [
"none",
"presentation"
],
"canvas": [
"img"
]
} |
||
|
no-noninteractive-element-interactions Non-interactive elements should not be assigned mouse or keyboard event listeners. |
handlers: onClick, onError,...{
"handlers": [
"onClick",
"onError",
"onLoad",
"onMouseDown",
"onMouseUp",
"onKeyPress",
"onKeyDown",
"onKeyUp"
],
"alert": [
"onKeyUp",
"onKeyDown",
"onKeyPress"
],
"body": [
"onError",
"onLoad"
],
"dialog": [
"onKeyUp",
"onKeyDown",
"onKeyPress"
],
"iframe": [
"onError",
"onLoad"
],
"img": [
"onError",
"onLoad"
]
} |
||
|
no-noninteractive-element-to-interactive-role Non-interactive elements should not be assigned interactive roles. |
ul: listbox, menu, menubar,...{
"ul": [
"listbox",
"menu",
"menubar",
"radiogroup",
"tablist",
"tree",
"treegrid"
],
"ol": [
"listbox",
"menu",
"menubar",
"radiogroup",
"tablist",
"tree",
"treegrid"
],
"li": [
"menuitem",
"menuitemradio",
"menuitemcheckbox",
"option",
"row",
"tab",
"treeitem"
],
"table": [
"grid"
],
"td": [
"gridcell"
],
"fieldset": [
"radiogroup",
"presentation"
]
} |
||
|
no-noninteractive-tabindextabIndex should only be declared on interactive elements. |
tags: , roles: tabpanel, al...{
"tags": [],
"roles": [
"tabpanel"
],
"allowExpressionValues": true
} |
||
|
no-static-element-interactions Enforce that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute. |
allowExpressionValues: true...{
"allowExpressionValues": true,
"handlers": [
"onClick",
"onMouseDown",
"onMouseUp",
"onKeyPress",
"onKeyDown",
"onKeyUp"
]
} |
||
|
role-has-required-aria-props Enforce that elements with ARIA roles must have all required attributes for that role. |
|||
|
role-supports-aria-props Enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role. |
|||
|
scope Enforce scope prop is only used on <th> elements. |
|||
|
tabindex-no-positive Enforce tabIndex value is not greater than zero. |
|||
 |
button-has-type Disallow usage of button elements without an explicit type attribute |
|||
|
default-props-match-prop-types Enforce all defaultProps have a corresponding non-required PropType |
|||
|
forbid-prop-types Disallow certain propTypes |
|||
|
forward-ref-uses-ref Require all forwardRef components include a ref parameter |
💡 | ||
|
iframe-missing-sandbox Enforce sandbox attribute on iframe elements |
|||
|
jsx-key Disallow missing key props in iterators/collection literals |
|||
|
jsx-no-bind Disallow .bind() or arrow functions in JSX props |
|||
|
jsx-no-comment-textnodes Disallow comments from being inserted as text nodes |
|||
|
jsx-no-constructed-context-values Disallows JSX context provider values from taking values that will cause needless rerenders |
|||
|
jsx-no-duplicate-props Disallow duplicate properties in JSX |
|||
|
jsx-no-script-url Disallow usage of javascript: URLs |
|||
|
jsx-no-target-blank Disallow target="_blank" attribute without rel="noreferrer" |
🔧 | ||
|
jsx-no-undef Disallow undeclared variables in JSX |
|||
|
jsx-uses-react Disallow React to be incorrectly marked as unused |
|||
|
jsx-uses-vars Disallow variables used in JSX to be incorrectly marked as unused |
|||
|
no-access-state-in-setstate Disallow when this.state is accessed within setState |
|||
|
no-array-index-key Disallow usage of Array index in keys |
|||
|
no-children-prop Disallow passing of children as props |
|||
|
no-danger Disallow usage of dangerous JSX properties |
|||
|
no-danger-with-children Disallow when a DOM element is using both children and dangerouslySetInnerHTML |
|||
|
no-deprecated Disallow usage of deprecated methods |
|||
|
no-did-mount-set-state Disallow usage of setState in componentDidMount |
|||
|
no-did-update-set-state Disallow usage of setState in componentDidUpdate |
|||
|
no-direct-mutation-state Disallow direct mutation of this.state |
|||
|
no-find-dom-node Disallow usage of findDOMNode |
|||
|
no-invalid-html-attribute Disallow usage of invalid attributes |
💡 | ||
|
no-is-mounted Disallow usage of isMounted |
|||
|
no-namespace Enforce that namespaces are not used in React elements |
|||
|
no-object-type-as-default-prop Disallow usage of referential-type variables as default param in functional component |
|||
|
no-render-return-value Disallow usage of the return value of ReactDOM.render |
|||
|
no-string-refs Disallow using string references |
|||
|
no-this-in-sfc Disallow this from being used in stateless functional components |
|||
|
no-typos Disallow common typos |
|||
|
no-unescaped-entities Disallow unescaped HTML entities from appearing in markup |
💡 | ||
|
no-unknown-property Disallow usage of unknown DOM property |
🔧 | ||
|
no-unstable-nested-components Disallow creating unstable components inside components |
|||
|
no-will-update-set-state Disallow usage of setState in componentWillUpdate |
|||
|
prop-types Disallow missing props validation in a React component definition |
|||
|
react-in-jsx-scope Disallow missing React when using JSX |
|||
|
require-render-return Enforce ES5 or ES6 class for returning value in render function |
|||
|
void-dom-elements-no-children Disallow void DOM elements (e.g. <img />, <br />) from receiving children |
|||
 |
exhaustive-deps verifies the list of dependencies for Hooks like useEffect and similar |
🔧, 💡 | ||
|
rules-of-hooks enforces the Rules of Hooks |
| Plugin | Rule | Options | Autofix | Overrides |
|---|---|---|---|---|
|
no-autofocus Enforce autoFocus prop is not used. |
|||
|
no-redundant-roles Enforce explicit role property is not the same as implicit/default role property on element. |
|||
|
prefer-tag-over-role Enforces using semantic DOM elements over the ARIA role property. |
|||
|
display-name Disallow missing displayName in a React component definition |
|||
|
forbid-component-props Disallow certain props on components |
|||
|
function-component-definition Enforce a specific function type for function components |
🔧 | ||
|
hook-use-state Ensure destructuring and symmetric naming of useState hook value and setter variables |
💡 | ||
|
jsx-boolean-value Enforce boolean attributes notation in JSX |
🔧 | ||
|
jsx-curly-brace-presence Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes |
props: never, children: nev...{
"props": "never",
"children": "never",
"propElementValues": "always"
} |
🔧 | |
|
jsx-filename-extension Disallow file extensions that may contain JSX |
extensions: .jsx, .tsx{
"extensions": [
".jsx",
".tsx"
]
} |
||
|
jsx-fragments Enforce shorthand or standard form for React fragments |
🔧 | ||
|
jsx-handler-names Enforce event handler naming conventions in JSX |
|||
|
jsx-max-depth Enforce JSX maximum depth |
max: 10{
"max": 10
} |
||
|
jsx-no-leaked-render Disallow problematic leaked values from being rendered |
🔧 | ||
|
jsx-no-useless-fragment Disallow unnecessary fragments |
🔧 | ||
|
jsx-pascal-case Enforce PascalCase for user-defined JSX components |
|||
|
jsx-props-no-spread-multi Disallow JSX prop spreading the same identifier multiple times |
|||
|
no-arrow-function-lifecycle Lifecycle methods should be methods on the prototype, not class fields |
🔧 | ||
|
no-multi-comp Disallow multiple component definition per file |
ignoreStateless: true{
"ignoreStateless": true
} |
||
|
no-redundant-should-component-update Disallow usage of shouldComponentUpdate when extending React.PureComponent |
|||
|
no-unused-class-component-methods Disallow declaring unused methods of component class |
|||
|
no-unused-prop-types Disallow definitions of unused propTypes |
|||
|
no-unused-state Disallow definitions of unused state |
|||
|
prefer-es6-class Enforce ES5 or ES6 class for React Components |
|||
|
prefer-stateless-function Enforce stateless components to be written as a pure function |
|||
|
self-closing-comp Disallow extra closing tags for components without children |
🔧 | ||
|
state-in-constructor Enforce class component state initialization style |
|||
|
static-property-placement Enforces where React component static properties should be positioned. |
|||
|
style-prop-object Enforce style prop value is an object |