- Notifications
You must be signed in to change notification settings - Fork0
React-specific linting rules for ESLint
License
patorjk/eslint-plugin-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
===================
React specific linting rules foreslint
npm install eslint eslint-plugin-react --save-dev
It is also possible to install ESLint globally rather than locally (usingnpm install -g eslint). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
Useour preset to get reasonable defaults:
"extends": ["eslint:recommended","plugin:react/recommended" ]
If you are using thenew JSX transform from React 17, extendreact/jsx-runtime in your eslint config (add"plugin:react/jsx-runtime" to"extends") to disable the relevant rules.
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""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.// It will default to "latest" and warn if missing, and 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"},// 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":"Form","formAttribute":"endpoint"}],"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.
Witheslint 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", }
This plugin exports arecommended configuration that enforces React good practices.
To enable this configuration use theextends property in your.eslintrc config file:
{"extends": ["eslint:recommended","plugin:react/recommended"]}Seeeslint documentation for more information about extending configuration files.
This plugin also exports anall configuration that includes every available rule.This pairs well with theeslint:all rule.
{"plugins": ["react" ],"extends": ["eslint:all","plugin:react/all"]}Note: These configurations will importeslint-plugin-react and enable JSX inparser options.
Fromv8.21.0, eslint announced a new config system.In the new system,.eslintrc* is no longer used.eslint.config.js would be the default config file name.In eslintv8, the legacy system (.eslintrc*) would still be supported, while in eslintv9, only the new system would be supported.
And fromv8.23.0, eslint CLI starts to look upeslint.config.js.So, if your eslint is>=8.23.0, you're 100% ready to use the new config system.
You might want to check out the official blog posts,
- https://eslint.org/blog/2022/08/new-config-system-part-1/
- https://eslint.org/blog/2022/08/new-config-system-part-2/
- https://eslint.org/blog/2022/08/new-config-system-part-3/
and theofficial docs.
The default export ofeslint-plugin-react is a plugin object.
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},…];
Refer to theofficial docs.
The schema of thesettings.react object would be identical to that of what's already described above in the legacy config section.
There're also 3 shareable configs.
eslint-plugin-react/configs/alleslint-plugin-react/configs/recommendedeslint-plugin-react/configs/jsx-runtime
If your eslint.config.js is ESM, include the.js extension (e.g.eslint-plugin-react/recommended.js). Note that the next semver-major will require omitting the extension for these imports.
Note: These configurations will importeslint-plugin-react and enable JSX inlanguageOptions.parserOptions.
In the new config system,plugin: protocol(e.g.plugin:react/recommended) is no longer valid.As eslint does not automatically import the preset config (shareable config), you explicitly do it by yourself.
constreactRecommended=require('eslint-plugin-react/configs/recommended');module.exports=[…reactRecommended,// This is not a plugin object, but a shareable config object…];
You can of course add/override some properties.
Note: Our shareable configs does not preconfigurefiles orlanguageOptions.globals.For most of the cases, you probably want to configure some properties by yourself.
constreactRecommended=require('eslint-plugin-react/configs/recommended');constglobals=require('globals');module.exports=[…{files:['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'], ...reactRecommended,languageOptions:{ ...reactRecommended.languageOptions,globals:{ ...globals.serviceworker, ...globals.browser,},},},…];
The above example is same as the example below, as the new config system is based on chaining.
constreactRecommended=require('eslint-plugin-react/configs/recommended');constglobals=require('globals');module.exports=[…{files:['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'], ...reactRecommended,},{files:['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],languageOptions:{globals:{ ...globals.serviceworker, ...globals.browser,},},},…];
💼Configurations enabled in.
🚫Configurations disabled in.
🏃 Set in thejsx-runtimeconfiguration.
☑️ Set in therecommendedconfiguration.
🔧 Automatically fixable by the--fix CLI option.
💡 Manually fixable byeditor suggestions.
❌ Deprecated.
| Name | Description | 💼 | 🚫 | 🔧 | 💡 | ❌ |
|---|---|---|---|---|---|---|
| boolean-prop-naming | Enforces consistent naming for boolean props | |||||
| button-has-type | Disallow usage ofbutton elements without an explicittype attribute | |||||
| default-props-match-prop-types | Enforce all defaultProps have a corresponding non-required PropType | |||||
| destructuring-assignment | Enforce consistent usage of destructuring assignment of props, state, and context | 🔧 | ||||
| display-name | Disallow missing displayName in a React component definition | ☑️ | ||||
| forbid-component-props | Disallow certain props on components | |||||
| forbid-dom-props | Disallow certain props on DOM Nodes | |||||
| forbid-elements | Disallow certain elements | |||||
| forbid-foreign-prop-types | Disallow using another component's propTypes | |||||
| forbid-prop-types | Disallow certain propTypes | |||||
| function-component-definition | Enforce a specific function type for function components | 🔧 | ||||
| hook-use-state | Ensure destructuring and symmetric naming of useState hook value and setter variables | 💡 | ||||
| iframe-missing-sandbox | Enforce sandbox attribute on iframe elements | |||||
| jsx-boolean-value | Enforce boolean attributes notation in JSX | 🔧 | ||||
| jsx-child-element-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | |||||
| jsx-closing-bracket-location | Enforce closing bracket location in JSX | 🔧 | ||||
| jsx-closing-tag-location | Enforce closing tag location for multiline JSX | 🔧 | ||||
| jsx-curly-brace-presence | Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes | 🔧 | ||||
| jsx-curly-newline | Enforce consistent linebreaks in curly braces in JSX attributes and expressions | 🔧 | ||||
| jsx-curly-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | 🔧 | ||||
| jsx-equals-spacing | Enforce or disallow spaces around equal signs in JSX attributes | 🔧 | ||||
| jsx-filename-extension | Disallow file extensions that may contain JSX | |||||
| jsx-first-prop-new-line | Enforce proper position of the first property in JSX | 🔧 | ||||
| jsx-fragments | Enforce shorthand or standard form for React fragments | 🔧 | ||||
| jsx-handler-names | Enforce event handler naming conventions in JSX | |||||
| jsx-indent | Enforce JSX indentation | 🔧 | ||||
| jsx-indent-props | Enforce props indentation in JSX | 🔧 | ||||
| jsx-key | Disallow missingkey props in iterators/collection literals | ☑️ | ||||
| jsx-max-depth | Enforce JSX maximum depth | |||||
| jsx-max-props-per-line | Enforce maximum of props on a single line in JSX | 🔧 | ||||
| jsx-newline | Require or prevent a new line after jsx elements and expressions. | 🔧 | ||||
| jsx-no-bind | Disallow.bind() or arrow functions in JSX props | |||||
| jsx-no-comment-textnodes | Disallow comments from being inserted as text nodes | ☑️ | ||||
| jsx-no-constructed-context-values | Disallows JSX context provider values from taking values that will cause needless rerenders | |||||
| jsx-no-duplicate-props | Disallow duplicate properties in JSX | ☑️ | ||||
| jsx-no-leaked-render | Disallow problematic leaked values from being rendered | 🔧 | ||||
| jsx-no-literals | Disallow usage of string literals in JSX | |||||
| jsx-no-script-url | Disallow usage of#"left"> | |||||
| jsx-no-target-blank | Disallowtarget="_blank" attribute withoutrel="noreferrer" | ☑️ | 🔧 | |||
| jsx-no-undef | Disallow undeclared variables in JSX | ☑️ | ||||
| jsx-no-useless-fragment | Disallow unnecessary fragments | 🔧 | ||||
| jsx-one-expression-per-line | Require one JSX element per line | 🔧 | ||||
| jsx-pascal-case | Enforce PascalCase for user-defined JSX components | |||||
| jsx-props-no-multi-spaces | Disallow multiple spaces between inline JSX props | 🔧 | ||||
| jsx-props-no-spreading | Disallow JSX prop spreading | |||||
| jsx-sort-default-props | Enforce defaultProps declarations alphabetical sorting | ❌ | ||||
| jsx-sort-props | Enforce props alphabetical sorting | 🔧 | ||||
| jsx-space-before-closing | Enforce spacing before closing bracket in JSX | 🔧 | ❌ | |||
| jsx-tag-spacing | Enforce whitespace in and around the JSX opening and closing brackets | 🔧 | ||||
| jsx-uses-react | Disallow React to be incorrectly marked as unused | ☑️ | 🏃 | |||
| jsx-uses-vars | Disallow variables used in JSX to be incorrectly marked as unused | ☑️ | ||||
| jsx-wrap-multilines | Disallow missing parentheses around multiline JSX | 🔧 | ||||
| no-access-state-in-setstate | Disallow when this.state is accessed within setState | |||||
| no-adjacent-inline-elements | Disallow adjacent inline elements not separated by whitespace. | |||||
| no-array-index-key | Disallow usage of Array index in keys | |||||
| no-arrow-function-lifecycle | Lifecycle methods should be methods on the prototype, not class fields | 🔧 | ||||
| no-children-prop | Disallow passing of children as props | ☑️ | ||||
| no-danger | Disallow usage of dangerous JSX properties | |||||
| no-danger-with-children | Disallow when a DOM element is using both children and dangerouslySetInnerHTML | ☑️ | ||||
| no-deprecated | Disallow usage of deprecated methods | ☑️ | ||||
| no-did-mount-set-state | Disallow usage of setState in componentDidMount | |||||
| no-did-update-set-state | Disallow usage of setState in componentDidUpdate | |||||
| no-direct-mutation-state | Disallow direct mutation of this.state | ☑️ | ||||
| no-find-dom-node | Disallow usage of findDOMNode | ☑️ | ||||
| no-invalid-html-attribute | Disallow usage of invalid attributes | 💡 | ||||
| no-is-mounted | Disallow usage of isMounted | ☑️ | ||||
| no-multi-comp | Disallow multiple component definition per file | |||||
| no-namespace | Enforce that namespaces are not used in React elements | |||||
| no-object-type-as-default-prop | Disallow usage of referential-type variables as default param in functional component | |||||
| no-redundant-should-component-update | Disallow usage of shouldComponentUpdate when extending React.PureComponent | |||||
| no-render-return-value | Disallow usage of the return value of ReactDOM.render | ☑️ | ||||
| no-set-state | Disallow usage of setState | |||||
| no-string-refs | Disallow using string references | ☑️ | ||||
| no-this-in-sfc | Disallowthis from being used in stateless functional components | |||||
| no-typos | Disallow common typos | |||||
| no-unescaped-entities | Disallow unescaped HTML entities from appearing in markup | ☑️ | ||||
| no-unknown-property | Disallow usage of unknown DOM property | ☑️ | 🔧 | |||
| no-unsafe | Disallow usage of unsafe lifecycle methods | ☑️ | ||||
| no-unstable-nested-components | Disallow creating unstable components inside components | |||||
| no-unused-class-component-methods | Disallow declaring unused methods of component class | |||||
| no-unused-prop-types | Disallow definitions of unused propTypes | |||||
| no-unused-state | Disallow definitions of unused state | |||||
| no-will-update-set-state | Disallow usage of setState in componentWillUpdate | |||||
| prefer-es6-class | Enforce ES5 or ES6 class for React Components | |||||
| prefer-exact-props | Prefer exact proptype definitions | |||||
| prefer-read-only-props | Enforce that props are read-only | 🔧 | ||||
| prefer-stateless-function | Enforce stateless components to be written as a pure function | |||||
| prefer-use-state-lazy-initialization | Disallow function calls in useState that aren't wrapped in an initializer function | |||||
| prop-types | Disallow missing props validation in a React component definition | ☑️ | ||||
| react-in-jsx-scope | Disallow missing React when using JSX | ☑️ | 🏃 | |||
| require-default-props | Enforce a defaultProps definition for every prop that is not a required prop | |||||
| require-optimization | Enforce React components to have a shouldComponentUpdate method | |||||
| require-render-return | Enforce ES5 or ES6 class for returning value in render function | ☑️ | ||||
| self-closing-comp | Disallow extra closing tags for components without children | 🔧 | ||||
| sort-comp | Enforce component methods order | |||||
| sort-default-props | Enforce defaultProps declarations alphabetical sorting | |||||
| sort-prop-types | Enforce propTypes declarations alphabetical sorting | 🔧 | ||||
| state-in-constructor | Enforce class component state initialization style | |||||
| static-property-placement | Enforces where React component static properties should be positioned. | |||||
| style-prop-object | Enforce style prop value is an object | |||||
| void-dom-elements-no-children | Disallow void DOM elements (e.g.<img />,<br />) from receiving children |
- Rules of Hooks:eslint-plugin-react-hooks
- JSX accessibility:eslint-plugin-jsx-a11y
- React Native:eslint-plugin-react-native
eslint-plugin-react is licensed under theMIT License.
About
React-specific linting rules for ESLint
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Languages
- JavaScript100.0%