Package Exports

eslint-plugin-react
eslint-plugin-react/lib/rules/jsx-boolean-value
eslint-plugin-react/lib/rules/jsx-curly-spacing
eslint-plugin-react/lib/rules/jsx-indent-props
eslint-plugin-react/lib/rules/jsx-no-bind
eslint-plugin-react/lib/rules/jsx-no-duplicate-props
eslint-plugin-react/lib/rules/jsx-no-literals
eslint-plugin-react/lib/rules/jsx-no-undef
eslint-plugin-react/lib/rules/jsx-pascal-case
eslint-plugin-react/lib/rules/jsx-sort-props
eslint-plugin-react/lib/rules/jsx-uses-react
eslint-plugin-react/lib/rules/jsx-uses-vars
eslint-plugin-react/lib/rules/no-danger
eslint-plugin-react/lib/rules/no-did-mount-set-state
eslint-plugin-react/lib/rules/no-did-update-set-state
eslint-plugin-react/lib/rules/no-direct-mutation-state
eslint-plugin-react/lib/rules/no-set-state
eslint-plugin-react/lib/rules/no-unknown-property
eslint-plugin-react/lib/rules/prefer-es6-class
eslint-plugin-react/lib/rules/prop-types
eslint-plugin-react/lib/rules/react-in-jsx-scope
eslint-plugin-react/lib/rules/self-closing-comp
eslint-plugin-react/lib/util/Components
eslint-plugin-react/lib/util/variable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ESLint-plugin-React

React specific linting rules for ESLint

Installation

Install ESLint either locally or globally.

$ npm install eslint

If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.

$ npm install eslint-plugin-react

Configuration

Add plugins section and specify ESLint-plugin-React as a plugin.

{
  "plugins": [
    "react"
  ]
}

If it is not already the case you must also configure ESLint to support JSX.

{
  "ecmaFeatures": {
    "jsx": true
  }
}

Finally, enable all of the rules that you would like to use.

{
  "rules": {
    "react/display-name": 1,
    "react/forbid-prop-types": 1,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-handler-names": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 1,
    "react/jsx-no-bind": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-quotes": 1,
    "react/jsx-sort-prop-types": 1,
    "react/jsx-sort-props": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 1,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}

List of supported rules

display-name: Prevent missing displayName in a React component definition
forbid-prop-types: Forbid certain propTypes
jsx-boolean-value: Enforce boolean attributes notation in JSX
jsx-closing-bracket-location: Validate closing bracket location in JSX
jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes
jsx-handler-names: Enforce event handler naming conventions in JSX
jsx-indent-props: Validate props indentation in JSX
jsx-key: Validate JSX has key prop when in array or iterator
jsx-max-props-per-line: Limit maximum of props on a single line in JSX
jsx-no-bind: Prevent usage of .bind() and arrow functions in JSX props
jsx-no-duplicate-props: Prevent duplicate props in JSX
jsx-no-literals: Prevent usage of unwrapped JSX strings
jsx-no-undef: Disallow undeclared variables in JSX
jsx-pascal-case: Enforce PascalCase for user-defined JSX components
jsx-quotes: Enforce quote style for JSX attributes
jsx-sort-prop-types: Enforce propTypes declarations alphabetical sorting
jsx-sort-props: Enforce props alphabetical sorting
jsx-uses-react: Prevent React to be incorrectly marked as unused
jsx-uses-vars: Prevent variables used in JSX to be incorrectly marked as unused
no-danger: Prevent usage of dangerous JSX properties
no-did-mount-set-state: Prevent usage of setState in componentDidMount
no-did-update-set-state: Prevent usage of setState in componentDidUpdate
no-direct-mutation-state: Prevent direct mutation of this.state
no-multi-comp: Prevent multiple component definition per file
no-set-state: Prevent usage of setState
no-unknown-property: Prevent usage of unknown DOM property
prefer-es6-class: Prefer es6 class instead of createClass for React Components
prop-types: Prevent missing props validation in a React component definition
react-in-jsx-scope: Prevent missing React when using JSX
require-extension: Restrict file extensions that may be required
self-closing-comp: Prevent extra closing tags for components without children
sort-comp: Enforce component methods order
wrap-multilines: Prevent missing parentheses around multilines JSX

To Do

no-deprecated: Prevent usage of deprecated methods (React 0.12 Updated API)
no-classic: Prevent usage of "classic" methods (#2700)
Implement relevant rules from David Chang's React Style Guide
Implement relevant rules from John Cobb's best practices and conventions
Implement relevant rules from Alexander Early's tips and best practices

Any rule idea is welcome !

License

ESLint-plugin-React is licensed under the MIT License.