React specific linting rules for ESLint
Install ESLint either locally or globally. (Note that locally, per project, is strongly preferred)
$ npm install eslint --save-dev
If you installed ESLint
globally, you have to install React plugin globally too. Otherwise, install it locally.
$ npm install eslint-plugin-react --save-dev
Use our preset to get reasonable defaults:
"extends": [ "eslint:recommended", "plugin:react/recommended" ]
You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)
{ "settings": { "react": { "createClass": "createReactClass", // Regex for Component Factory to use, // default to "createReactClass" "pragma": "React", // Pragma to use, default to "React" "version": "detect", // React version. "detect" automatically picks the version you have installed. // You can also use `16.0`, `16.3`, etc, if you want to override the detected value. // default to latest and warns if missing // It will default to "detect" in the future "flowVersion": "0.53" // Flow version }, "propWrapperFunctions": [ // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped. "forbidExtraProps", {"property": "freeze", "object": "Object"}, {"property": "myFavoriteWrapper"} ], "linkComponents": [ // Components used as alternatives to <a> for linking, eg. <Link to={ url } /> "Hyperlink", {"name": "Link", "linkAttribute": "to"} ] } }
If you do not use a preset you will need to specify individual rules and add extra configuration.
Add “react” to the plugins section.
{ "plugins": [ "react" ] }
Enable JSX support.
With ESLint 2+
{ "parserOptions": { "ecmaFeatures": { "jsx": true } } }
Enable the rules that you would like to use.
"rules": { "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error", }
<br />
).key
props in iterators/collection literalsjavascript:
URLsThis plugin exports a recommended
configuration that enforces React good practices.
To enable this configuration use the extends
property in your .eslintrc
config file:
{ "extends": ["eslint:recommended", "plugin:react/recommended"] }
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.
{ "plugins": [ "react" ], "extends": ["eslint:all", "plugin:react/all"] }
Note: These configurations will import eslint-plugin-react
and enable JSX in parser options.
ESLint-plugin-React is licensed under the MIT License.