Repository files navigation

React specific linting rules for ESLint

InstallESLint either locally or globally.

npm install eslint

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

$ npm install eslint-plugin-react

Addplugins section and specify ESLint-plugin-React as a plugin.

{"plugins": ["react"  ]}

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

{"ecmaFeatures": {"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,"react/self-closing-comp":1,"react/no-did-mount-set-state":1,"react/no-did-update-set-state":1,"react/jsx-uses-react":1,"react/react-in-jsx-scope":1  }}

• no-multi-comp: Prevent multiple component definition per file
• prop-types: Prevent missing props validation in a React component definition
• display-name: Prevent missing displayName in a React component definition
• wrap-multilines: Prevent missing parentheses around multilines JSX
• self-closing-comp: Prevent extra closing tags for components without children
• no-did-mount-set-state: Prevent usage of setState in componentDidMount
• no-did-update-set-state: Prevent usage of setState in componentDidUpdate
• jsx-uses-react: Prevent React to be incorrectly marked as unused
• react-in-jsx-scope: Prevent missing React when using 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

Any rule idea is welcome !

ESLint-plugin-React is licensed under theMIT License.