Last updated
Was this helpful?
React specific linting rules for ESLint
Install either locally or globally. (Note that locally, per project, is strongly preferred)
If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.
Use to get reasonable defaults:
You should also specify settings that will be shared across all the plugin rules. ()
If you do not use a preset you will need to specify individual rules and add extra configuration.
Add "react" to the plugins section.
Enable JSX support.
With ESLint 2+
Enable the rules that you would like to use.
This plugin exports a recommended configuration that enforces React good practices.
To enable this configuration use the extends property in your .eslintrc config file:
The rules enabled in this configuration are:
This plugin also exports an all configuration that includes every available rule. This pairs well with the eslint:all rule.
: Enforces consistent naming for boolean props
: Forbid "button" element without an explicit "type" attribute
: Enforce all defaultProps are defined and not "required" in propTypes.
: Enforce consistent usage of destructuring assignment of props, state, and context
: Prevent missing displayName in a React component definition
: Forbid certain props on components
: Forbid certain props on DOM Nodes
: Forbid certain elements
: Forbid using another component's propTypes
: Forbid certain propTypes
: Standardize the way function component get defined (fixable)
: Reports when this.state is accessed within setState
: Prevent adjacent inline elements not separated by whitespace.
: Prevent usage of Array index in keys
: Prevent passing of children as props.
: Prevent usage of dangerous JSX props
: Report when a DOM element is using both children and dangerouslySetInnerHTML
: Prevent usage of deprecated methods
: Prevent usage of setState in componentDidMount
: Prevent usage of setState in componentDidUpdate
: Prevent direct mutation of this.state
: Prevent usage of findDOMNode
: Prevent usage of isMounted
: Prevent multiple component definition per file
: Flag shouldComponentUpdate when extending PureComponent
: Prevent usage of the return value of React.render
: Prevent usage of setState
: Prevent string definitions for references and prevent referencing this.refs
: Report "this" being used in stateless components
: Prevent common typos
: Detect unescaped HTML entities, which might represent malformed tags
: Prevent usage of unknown DOM property (fixable)
: Prevent usage of unsafe lifecycle methods
: Prevent definitions of unused prop types
: Prevent definition of unused state fields
: Prevent usage of setState in componentWillUpdate
: Enforce ES5 or ES6 class for React Components
: Require read-only props. (fixable)
: Enforce stateless components to be written as a pure function
: Prevent missing props validation in a React component definition
: Prevent missing React when using JSX
: Enforce a defaultProps definition for every prop that is not a required prop.
: Enforce React components to have a shouldComponentUpdate method
: Enforce ES5 or ES6 class for returning value in render function
: Prevent extra closing tags for components without children (fixable)
: Enforce component methods order
: Enforce propTypes declarations alphabetical sorting
: State initialization in an ES6 class component should be in a constructor
: Defines where React component static properties should be positioned.
: Enforce style prop value is an object
: Prevent passing of children to void DOM elements (e.g. <br />).
: Enforce boolean attributes notation in JSX (fixable)
: Ensures inline tags are not rendered without spaces between them
: Validate closing bracket location in JSX (fixable)
: Validate closing tag location for multiline JSX (fixable)
: Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes (fixable)
: Enforce consistent line breaks inside jsx curly (fixable)
: Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
: Disallow or enforce spaces around equal signs in JSX attributes (fixable)
: Restrict file extensions that may contain JSX
: Ensure proper position of the first property in JSX (fixable)
: Enforce shorthand or standard form for React fragments (fixable)
: Enforce event handler naming conventions in JSX
: Validate JSX indentation (fixable)
: Validate props indentation in JSX (fixable)
: Report missing key props in iterators/collection literals
: Validate JSX maximum depth
: Limit maximum of props on a single line in JSX (fixable)
: Prevents usage of Function.prototype.bind and arrow functions in React component props
: Comments inside children section of tag should be placed inside braces
: Enforce no duplicate props
: Prevent using string literals in React component definition
: Forbid javascript: URLs
: Forbid target="_blank" attribute without rel="noopener noreferrer"
: Disallow undeclared variables in JSX
: Disallow unnecessary fragments (fixable)
: Limit to one expression per line in JSX (fixable)
: Enforce PascalCase for user-defined JSX components
: Disallow multiple spaces between inline JSX props (fixable)
: Prevent JSX prop spreading
: Enforce default props alphabetical sorting
: Enforce props alphabetical sorting (fixable)
: Validate spacing before closing bracket in JSX (fixable)
: Validate whitespace in and around the JSX opening and closing brackets (fixable)
: Prevent React to be marked as unused
: Prevent variables used in JSX to be marked as unused
: Prevent missing parentheses around multilines JSX (fixable)
JSX accessibility:
React Native:
See for more information about extending configuration files.
Note: These configurations will import eslint-plugin-react and enable JSX in .
ESLint-plugin-React is licensed under the .
