Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inDemoInstall

eslint-plugin-react

Package Overview
Dependencies
15
Maintainers
2
Versions
197
Issues
File Explorer

Advanced tools

eslint-plugin-react

React specific linting rules for ESLint

    7.32.2latest
    Github

Version published
Maintainers
2
Weekly downloads
15,700,441
increased by8.31%

Weekly downloads

Changelog

Source

[7.32.2] - 2023.01.28

Fixed

  • configs: restore parserOptions in legacy configs ([#3523][] @ljharb)
  • [jsx-no-constructed-context-values], [jsx-no-useless-fragment]: add a rule schema (@ljharb) ( [no-unknown-property]: add fill for <marker> ([#3525][] @alexey-koran)

Readme

Source

eslint-plugin-react Version Badge

===================

github actions Maintenance Status NPM version Tidelift

React specific linting rules for eslint

Installation

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

It is also possible to install ESLint globally rather than locally (using npm install -g eslint). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

Configuration (legacy: .eslintrc*)

Use our preset to get reasonable defaults:

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

If you are using the new JSX transform from React 17, extend react/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.

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", }

Shareable configs

This 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.

All

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.

Configuration (new: eslint.config.js)

From v8.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 eslint v8, the legacy system (.eslintrc*) would still be supported, while in eslint v9, only the new system would be supported.

And from v8.23.0, eslint CLI starts to look up eslint.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,

and the official docs.

Plugin

The default export of eslint-plugin-react is a plugin object.

const react = require('eslint-plugin-react'); const globals = 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

Refer to the official docs.

The schema of the settings.react object would be identical to that of what's already described above in the legacy config section.

Shareable configs

There're also 3 shareable configs.

  • eslint-plugin-react/configs/all
  • eslint-plugin-react/configs/recommended
  • eslint-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 import eslint-plugin-react and enable JSX in languageOptions.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.

const reactRecommended = 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 preconfigure files or languageOptions.globals. For most of the cases, you probably want to configure some properties by yourself.

const reactRecommended = require('eslint-plugin-react/configs/recommended'); const globals = 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.

const reactRecommended = require('eslint-plugin-react/configs/recommended'); const globals = 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, }, }, }, … ];

List of supported rules

💼 Configurations enabled in.
🚫 Configurations disabled in.
🏃 Set in the jsx-runtime configuration.
☑️ Set in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.
❌ Deprecated.

Name                                Description💼🚫🔧💡
boolean-prop-namingEnforces consistent naming for boolean props
button-has-typeDisallow usage of button elements without an explicit type attribute
default-props-match-prop-typesEnforce all defaultProps have a corresponding non-required PropType
destructuring-assignmentEnforce consistent usage of destructuring assignment of props, state, and context🔧
display-nameDisallow missing displayName in a React component definition☑️
forbid-component-propsDisallow certain props on components
forbid-dom-propsDisallow certain props on DOM Nodes
forbid-elementsDisallow certain elements
forbid-foreign-prop-typesDisallow using another component's propTypes
forbid-prop-typesDisallow certain propTypes
function-component-definitionEnforce a specific function type for function components🔧
hook-use-stateEnsure destructuring and symmetric naming of useState hook value and setter variables💡
iframe-missing-sandboxEnforce sandbox attribute on iframe elements
jsx-boolean-valueEnforce boolean attributes notation in JSX🔧
jsx-child-element-spacingEnforce or disallow spaces inside of curly braces in JSX attributes and expressions
jsx-closing-bracket-locationEnforce closing bracket location in JSX🔧
jsx-closing-tag-locationEnforce closing tag location for multiline JSX🔧
jsx-curly-brace-presenceDisallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes🔧
jsx-curly-newlineEnforce consistent linebreaks in curly braces in JSX attributes and expressions🔧
jsx-curly-spacingEnforce or disallow spaces inside of curly braces in JSX attributes and expressions🔧
jsx-equals-spacingEnforce or disallow spaces around equal signs in JSX attributes🔧
jsx-filename-extensionDisallow file extensions that may contain JSX
jsx-first-prop-new-lineEnforce proper position of the first property in JSX🔧
jsx-fragmentsEnforce shorthand or standard form for React fragments🔧
jsx-handler-namesEnforce event handler naming conventions in JSX
jsx-indentEnforce JSX indentation🔧
jsx-indent-propsEnforce props indentation in JSX🔧
jsx-keyDisallow missing key props in iterators/collection literals☑️
jsx-max-depthEnforce JSX maximum depth
jsx-max-props-per-lineEnforce maximum of props on a single line in JSX🔧
jsx-newlineRequire or prevent a new line after jsx elements and expressions.🔧
jsx-no-bindDisallow .bind() or arrow functions in JSX props
jsx-no-comment-textnodesDisallow comments from being inserted as text nodes☑️
jsx-no-constructed-context-valuesDisallows JSX context provider values from taking values that will cause needless rerenders
jsx-no-duplicate-propsDisallow duplicate properties in JSX☑️
jsx-no-leaked-renderDisallow problematic leaked values from being rendered🔧
jsx-no-literalsDisallow usage of string literals in JSX
jsx-no-script-urlDisallow usage of javascript: URLs
jsx-no-target-blankDisallow target="_blank" attribute without rel="noreferrer"☑️🔧
jsx-no-undefDisallow undeclared variables in JSX☑️
jsx-no-useless-fragmentDisallow unnecessary fragments🔧
jsx-one-expression-per-lineRequire one JSX element per line🔧
jsx-pascal-caseEnforce PascalCase for user-defined JSX components
jsx-props-no-multi-spacesDisallow multiple spaces between inline JSX props🔧
jsx-props-no-spreadingDisallow JSX prop spreading
jsx-sort-default-propsEnforce defaultProps declarations alphabetical sorting
jsx-sort-propsEnforce props alphabetical sorting🔧
jsx-space-before-closingEnforce spacing before closing bracket in JSX🔧
jsx-tag-spacingEnforce whitespace in and around the JSX opening and closing brackets🔧
jsx-uses-reactDisallow React to be incorrectly marked as unused☑️🏃
jsx-uses-varsDisallow variables used in JSX to be incorrectly marked as unused☑️
jsx-wrap-multilinesDisallow missing parentheses around multiline JSX🔧
no-access-state-in-setstateDisallow when this.state is accessed within setState
no-adjacent-inline-elementsDisallow adjacent inline elements not separated by whitespace.
no-array-index-keyDisallow usage of Array index in keys
no-arrow-function-lifecycleLifecycle methods should be methods on the prototype, not class fields🔧
no-children-propDisallow passing of children as props☑️
no-dangerDisallow usage of dangerous JSX properties
no-danger-with-childrenDisallow when a DOM element is using both children and dangerouslySetInnerHTML☑️
no-deprecatedDisallow usage of deprecated methods☑️
no-did-mount-set-stateDisallow usage of setState in componentDidMount
no-did-update-set-stateDisallow usage of setState in componentDidUpdate
no-direct-mutation-stateDisallow direct mutation of this.state☑️
no-find-dom-nodeDisallow usage of findDOMNode☑️
no-invalid-html-attributeDisallow usage of invalid attributes💡
no-is-mountedDisallow usage of isMounted☑️
no-multi-compDisallow multiple component definition per file
no-namespaceEnforce that namespaces are not used in React elements
no-object-type-as-default-propDisallow usage of referential-type variables as default param in functional component
no-redundant-should-component-updateDisallow usage of shouldComponentUpdate when extending React.PureComponent
no-render-return-valueDisallow usage of the return value of ReactDOM.render☑️
no-set-stateDisallow usage of setState
no-string-refsDisallow using string references☑️
no-this-in-sfcDisallow this from being used in stateless functional components
no-typosDisallow common typos
no-unescaped-entitiesDisallow unescaped HTML entities from appearing in markup☑️
no-unknown-propertyDisallow usage of unknown DOM property☑️🔧
no-unsafeDisallow usage of unsafe lifecycle methods☑️
no-unstable-nested-componentsDisallow creating unstable components inside components
no-unused-class-component-methodsDisallow declaring unused methods of component class
no-unused-prop-typesDisallow definitions of unused propTypes
no-unused-stateDisallow definitions of unused state
no-will-update-set-stateDisallow usage of setState in componentWillUpdate
prefer-es6-classEnforce ES5 or ES6 class for React Components
prefer-exact-propsPrefer exact proptype definitions
prefer-read-only-propsEnforce that props are read-only🔧
prefer-stateless-functionEnforce stateless components to be written as a pure function
prop-typesDisallow missing props validation in a React component definition☑️
react-in-jsx-scopeDisallow missing React when using JSX☑️🏃
require-default-propsEnforce a defaultProps definition for every prop that is not a required prop
require-optimizationEnforce React components to have a shouldComponentUpdate method
require-render-returnEnforce ES5 or ES6 class for returning value in render function☑️
self-closing-compDisallow extra closing tags for components without children🔧
sort-compEnforce component methods order
sort-default-propsEnforce defaultProps declarations alphabetical sorting
sort-prop-typesEnforce propTypes declarations alphabetical sorting🔧
state-in-constructorEnforce class component state initialization style
static-property-placementEnforces where React component static properties should be positioned.
style-prop-objectEnforce style prop value is an object
void-dom-elements-no-childrenDisallow void DOM elements (e.g. <img />, <br />) from receiving children

Other useful plugins

License

eslint-plugin-react is licensed under the MIT License.

Keywords

FAQs

What is eslint-plugin-react?

React specific linting rules for ESLint

Is eslint-plugin-react popular?

The npm package eslint-plugin-react receives a total of 15,020,440 weekly downloads. As such, eslint-plugin-react popularity was classified as popular.

Is eslint-plugin-react well maintained?

We found that eslint-plugin-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 2 open source maintainers collaborating on the project.

Last updated on 29 Jan 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket[email protected]

Product

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc