ESLint-plugin-React

React specific linting rules for ESLint

Installation

Install ESLint either locally or globally.

npm install eslint@es6jsx

ESLint-plugin-React requires ESLint with JSX support which is only available on the es6jsx branch for now.

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 ECMAScript 6 and JSX.

{
  "settings": {
    "ecmascript": 6,
    "jsx": true
  }
}

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

{
  "rules": {
    "react/no-multi-comp": 1,
    "react/prop-types": 1,
    "react/display-name": 1,
    "react/wrap-multilines": 1
  }
}

List of supported rules

• no-multi-comp: Prevent multiple component definition per file
• prop-types: Prevent missing propTypes in a React component definition
• display-name: Prevent missing displayName in a React component definition
• 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 rules from David Chang's React Style Guide

Any rule idea is welcome !

License

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