React specific linting rules for ESLint
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
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/jsx-boolean-value": 1,
"react/jsx-no-undef": 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-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-multi-comp": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 1,
"react/wrap-multilines": 1
}
}- display-name: Prevent missing displayName in a React component definition
- jsx-boolean-value: Enforce boolean attributes notation in JSX
- jsx-no-undef: Disallow undeclared variables in JSX
- 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-did-mount-set-state: Prevent usage of setState in componentDidMount
- no-did-update-set-state: Prevent usage of setState in componentDidUpdate
- no-multi-comp: Prevent multiple component definition per file
- no-unknown-property: Prevent usage of unknown DOM property
- prop-types: Prevent missing props validation in a React component definition
- react-in-jsx-scope: Prevent missing React when using JSX
- 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
- 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
ESLint-plugin-React is licensed under the MIT License.