eslint-plugin-react
Last updated
Last updated
React specific linting rules for ESLint
Install ESLint 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 our preset to get reasonable defaults:
You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)
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.
react/boolean-prop-naming: Enforces consistent naming for boolean props
react/button-has-type: Forbid "button" element without an explicit "type" attribute
react/default-props-match-prop-types: Enforce all defaultProps are defined and not "required" in propTypes.
react/destructuring-assignment: Enforce consistent usage of destructuring assignment of props, state, and context
react/display-name: Prevent missing displayName in a React component definition
react/forbid-component-props: Forbid certain props on components
react/forbid-dom-props: Forbid certain props on DOM Nodes
react/forbid-elements: Forbid certain elements
react/forbid-foreign-prop-types: Forbid using another component's propTypes
react/forbid-prop-types: Forbid certain propTypes
react/function-component-definition: Standardize the way function component get defined (fixable)
react/no-access-state-in-setstate: Reports when this.state is accessed within setState
react/no-adjacent-inline-elements: Prevent adjacent inline elements not separated by whitespace.
react/no-array-index-key: Prevent usage of Array index in keys
react/no-children-prop: Prevent passing of children as props.
react/no-danger: Prevent usage of dangerous JSX props
react/no-danger-with-children: Report when a DOM element is using both children and dangerouslySetInnerHTML
react/no-deprecated: Prevent usage of deprecated methods
react/no-did-mount-set-state: Prevent usage of setState in componentDidMount
react/no-did-update-set-state: Prevent usage of setState in componentDidUpdate
react/no-direct-mutation-state: Prevent direct mutation of this.state
react/no-find-dom-node: Prevent usage of findDOMNode
react/no-is-mounted: Prevent usage of isMounted
react/no-multi-comp: Prevent multiple component definition per file
react/no-redundant-should-component-update: Flag shouldComponentUpdate when extending PureComponent
react/no-render-return-value: Prevent usage of the return value of React.render
react/no-set-state: Prevent usage of setState
react/no-string-refs: Prevent string definitions for references and prevent referencing this.refs
react/no-this-in-sfc: Report "this" being used in stateless components
react/no-typos: Prevent common typos
react/no-unescaped-entities: Detect unescaped HTML entities, which might represent malformed tags
react/no-unknown-property: Prevent usage of unknown DOM property (fixable)
react/no-unsafe: Prevent usage of unsafe lifecycle methods
react/no-unused-prop-types: Prevent definitions of unused prop types
react/no-unused-state: Prevent definition of unused state fields
react/no-will-update-set-state: Prevent usage of setState in componentWillUpdate
react/prefer-es6-class: Enforce ES5 or ES6 class for React Components
react/prefer-read-only-props: Require read-only props. (fixable)
react/prefer-stateless-function: Enforce stateless components to be written as a pure function
react/prop-types: Prevent missing props validation in a React component definition
react/react-in-jsx-scope: Prevent missing React when using JSX
react/require-default-props: Enforce a defaultProps definition for every prop that is not a required prop.
react/require-optimization: Enforce React components to have a shouldComponentUpdate method
react/require-render-return: Enforce ES5 or ES6 class for returning value in render function
react/self-closing-comp: Prevent extra closing tags for components without children (fixable)
react/sort-comp: Enforce component methods order
react/sort-prop-types: Enforce propTypes declarations alphabetical sorting
react/state-in-constructor: State initialization in an ES6 class component should be in a constructor
react/static-property-placement: Defines where React component static properties should be positioned.
react/style-prop-object: Enforce style prop value is an object
react/void-dom-elements-no-children: Prevent passing of children to void DOM elements (e.g. <br />
).
react/jsx-boolean-value: Enforce boolean attributes notation in JSX (fixable)
react/jsx-child-element-spacing: Ensures inline tags are not rendered without spaces between them
react/jsx-closing-bracket-location: Validate closing bracket location in JSX (fixable)
react/jsx-closing-tag-location: Validate closing tag location for multiline JSX (fixable)
react/jsx-curly-brace-presence: Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes (fixable)
react/jsx-curly-newline: Enforce consistent line breaks inside jsx curly (fixable)
react/jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
react/jsx-equals-spacing: Disallow or enforce spaces around equal signs in JSX attributes (fixable)
react/jsx-filename-extension: Restrict file extensions that may contain JSX
react/jsx-first-prop-new-line: Ensure proper position of the first property in JSX (fixable)
react/jsx-fragments: Enforce shorthand or standard form for React fragments (fixable)
react/jsx-handler-names: Enforce event handler naming conventions in JSX
react/jsx-indent: Validate JSX indentation (fixable)
react/jsx-indent-props: Validate props indentation in JSX (fixable)
react/jsx-key: Report missing key
props in iterators/collection literals
react/jsx-max-depth: Validate JSX maximum depth
react/jsx-max-props-per-line: Limit maximum of props on a single line in JSX (fixable)
react/jsx-no-bind: Prevents usage of Function.prototype.bind and arrow functions in React component props
react/jsx-no-comment-textnodes: Comments inside children section of tag should be placed inside braces
react/jsx-no-duplicate-props: Enforce no duplicate props
react/jsx-no-literals: Prevent using string literals in React component definition
react/jsx-no-script-url: Forbid javascript:
URLs
react/jsx-no-target-blank: Forbid target="_blank" attribute without rel="noopener noreferrer"
react/jsx-no-undef: Disallow undeclared variables in JSX
react/jsx-no-useless-fragment: Disallow unnecessary fragments (fixable)
react/jsx-one-expression-per-line: Limit to one expression per line in JSX (fixable)
react/jsx-pascal-case: Enforce PascalCase for user-defined JSX components
react/jsx-props-no-multi-spaces: Disallow multiple spaces between inline JSX props (fixable)
react/jsx-props-no-spreading: Prevent JSX prop spreading
react/jsx-sort-default-props: Enforce default props alphabetical sorting
react/jsx-sort-props: Enforce props alphabetical sorting (fixable)
react/jsx-space-before-closing: Validate spacing before closing bracket in JSX (fixable)
react/jsx-tag-spacing: Validate whitespace in and around the JSX opening and closing brackets (fixable)
react/jsx-uses-react: Prevent React to be marked as unused
react/jsx-uses-vars: Prevent variables used in JSX to be marked as unused
react/jsx-wrap-multilines: Prevent missing parentheses around multilines JSX (fixable)
JSX accessibility: eslint-plugin-jsx-a11y
React Native: eslint-plugin-react-native
This plugin exports a recommended
configuration that enforces React good practices.
To enable this configuration use the extends
property in your .eslintrc
config file:
See ESLint documentation for more information about extending configuration files.
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.
Note: These configurations will import eslint-plugin-react
and enable JSX in parser options.
ESLint-plugin-React is licensed under the MIT License.