eslint-plugin-react

Installation

npm install eslint eslint-plugin-react --save-dev

Configuration (legacy:.eslintrc*)

"extends": ["eslint:recommended","plugin:react/recommended"  ]

{"settings":{"react":{"createClass":"createReactClass",// Regex for Component Factory to use,// default to "createReactClass""pragma":"React",// Pragma to use, default to "React""fragment":"Fragment",// Fragment to use (may be a property of <pragma>), default to "Fragment""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.// Defaults to the "defaultVersion" setting and warns if missing, and to "detect" in the future"defaultVersion":"",// Default React version to use when the version you have installed cannot be detected.// If not provided, defaults to the latest React version."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"},// for rules that check exact prop wrappers{"property":"forbidExtraProps","exact":true}],"componentWrapperFunctions":[// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped."observer",// `property`{"property":"styled"},// `object` is optional{"property":"observer","object":"Mobx"},{"property":"observer","object":"<pragma>"}// sets `object` to whatever value `settings.react.pragma` is set to],"formComponents":[// Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />"CustomForm",{"name":"SimpleForm","formAttribute":"endpoint"},{"name":"Form","formAttribute":["registerEndpoint","loginEndpoint"]},// allows specifying multiple properties if necessary],"linkComponents":[// Components used as alternatives to <a> for linking, eg. <Link to={ url } />"Hyperlink",{"name":"MyLink","linkAttribute":"to"},{"name":"Link","linkAttribute":["to","href"]},// allows specifying multiple properties if necessary]}}

{"plugins": ["react"  ]}

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

"rules": {"react/jsx-uses-react":"error","react/jsx-uses-vars":"error",  }

Shareable configs

Recommended

{"extends": ["eslint:recommended","plugin:react/recommended"]}

All

{"plugins": ["react"  ],"extends": ["eslint:all","plugin:react/all"]}

Configuration (new:eslint.config.js)

Plugin

constreact=require('eslint-plugin-react');constglobals=require('globals');module.exports=[…{files:['**/*.{js,jsx,mjs,cjs,ts,tsx}'],plugins:{      react,},languageOptions:{parserOptions:{ecmaFeatures:{jsx:true,},},globals:{        ...globals.browser,},},rules:{// ... any rules you want'react/jsx-uses-react':'error','react/jsx-uses-vars':'error',},// ... others are omitted for brevity},…];

Configuring shared settings

Flat Configs

constreactPlugin=require('eslint-plugin-react');module.exports=[…reactPlugin.configs.flat.recommended,// This is not a plugin object, but a shareable config objectreactPlugin.configs.flat['jsx-runtime'],// Add this if you are using React 17+…];

constreactPlugin=require('eslint-plugin-react');constglobals=require('globals');module.exports=[…{files:['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],    ...reactPlugin.configs.flat.recommended,languageOptions:{      ...reactPlugin.configs.flat.recommended.languageOptions,globals:{        ...globals.serviceworker,        ...globals.browser,},},},…];

constreactPlugin=require('eslint-plugin-react');constglobals=require('globals');module.exports=[…{files:['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],    ...reactPlugin.configs.flat.recommended,},{files:['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],languageOptions:{globals:{        ...globals.serviceworker,        ...globals.browser,},},},…];

List of supported rules

Other useful plugins

License