npm.devtool.tech
πŸ‘ You can access eslint-plugin-react package with using eslintPluginReact variable in browser devtools!
React specific linting rules for ESLint

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

ESLint-plugin-React

Maintenance Status NPM version Build Status Dependency Status Code Climate Tidelift

React specific linting rules for ESLint

Installation

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

Configuration

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

List of supported rules

βœ”: Enabled in the recommended configuration.
πŸ”§: Fixable with eslint --fix.

βœ”πŸ”§RuleDescription
react/boolean-prop-namingEnforces consistent naming for boolean props
react/button-has-typeForbid "button" element without an explicit "type" attribute
react/default-props-match-prop-typesEnforce all defaultProps are defined and not "required" in propTypes.
react/destructuring-assignmentEnforce consistent usage of destructuring assignment of props, state, and context
βœ”react/display-namePrevent missing displayName in a React component definition
react/forbid-component-propsForbid certain props on components
react/forbid-dom-propsForbid certain props on DOM Nodes
react/forbid-elementsForbid certain elements
react/forbid-foreign-prop-typesForbid using another component's propTypes
react/forbid-prop-typesForbid certain propTypes
πŸ”§react/function-component-definitionStandardize the way function component get defined
react/no-access-state-in-setstateReports when this.state is accessed within setState
react/no-adjacent-inline-elementsPrevent adjacent inline elements not separated by whitespace.
react/no-array-index-keyPrevent usage of Array index in keys
βœ”react/no-children-propPrevent passing of children as props.
react/no-dangerPrevent usage of dangerous JSX props
βœ”react/no-danger-with-childrenReport when a DOM element is using both children and dangerouslySetInnerHTML
βœ”react/no-deprecatedPrevent usage of deprecated methods
react/no-did-mount-set-statePrevent usage of setState in componentDidMount
react/no-did-update-set-statePrevent usage of setState in componentDidUpdate
βœ”react/no-direct-mutation-statePrevent direct mutation of this.state
βœ”react/no-find-dom-nodePrevent usage of findDOMNode
βœ”react/no-is-mountedPrevent usage of isMounted
react/no-multi-compPrevent multiple component definition per file
react/no-redundant-should-component-updateFlag shouldComponentUpdate when extending PureComponent
βœ”react/no-render-return-valuePrevent usage of the return value of React.render
react/no-set-statePrevent usage of setState
βœ”react/no-string-refsPrevent string definitions for references and prevent referencing this.refs
react/no-this-in-sfcReport "this" being used in stateless components
react/no-typosPrevent common typos
βœ”react/no-unescaped-entitiesDetect unescaped HTML entities, which might represent malformed tags
βœ”πŸ”§react/no-unknown-propertyPrevent usage of unknown DOM property
react/no-unsafePrevent usage of unsafe lifecycle methods
react/no-unstable-nested-componentsPrevent creating unstable components inside components
react/no-unused-prop-typesPrevent definitions of unused prop types
react/no-unused-statePrevent definition of unused state fields
react/no-will-update-set-statePrevent usage of setState in componentWillUpdate
react/prefer-es6-classEnforce ES5 or ES6 class for React Components
react/prefer-exact-propsPrefer exact proptype definitions
πŸ”§react/prefer-read-only-propsRequire read-only props.
react/prefer-stateless-functionEnforce stateless components to be written as a pure function
βœ”react/prop-typesPrevent missing props validation in a React component definition
βœ”react/react-in-jsx-scopePrevent missing React when using JSX
react/require-default-propsEnforce a defaultProps definition for every prop that is not a required prop.
react/require-optimizationEnforce React components to have a shouldComponentUpdate method
βœ”react/require-render-returnEnforce ES5 or ES6 class for returning value in render function
πŸ”§react/self-closing-compPrevent extra closing tags for components without children
react/sort-compEnforce component methods order
react/sort-prop-typesEnforce propTypes declarations alphabetical sorting
react/state-in-constructorState initialization in an ES6 class component should be in a constructor
react/static-property-placementDefines where React component static properties should be positioned.
react/style-prop-objectEnforce style prop value is an object
react/void-dom-elements-no-childrenPrevent passing of children to void DOM elements (e.g. <br />).

JSX-specific rules

βœ”πŸ”§RuleDescription
πŸ”§react/jsx-boolean-valueEnforce boolean attributes notation in JSX
react/jsx-child-element-spacingEnsures inline tags are not rendered without spaces between them
πŸ”§react/jsx-closing-bracket-locationValidate closing bracket location in JSX
πŸ”§react/jsx-closing-tag-locationValidate closing tag location for multiline JSX
πŸ”§react/jsx-curly-brace-presenceDisallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes
πŸ”§react/jsx-curly-newlineEnforce consistent line breaks inside jsx curly
πŸ”§react/jsx-curly-spacingEnforce or disallow spaces inside of curly braces in JSX attributes
πŸ”§react/jsx-equals-spacingDisallow or enforce spaces around equal signs in JSX attributes
react/jsx-filename-extensionRestrict file extensions that may contain JSX
πŸ”§react/jsx-first-prop-new-lineEnsure proper position of the first property in JSX
πŸ”§react/jsx-fragmentsEnforce shorthand or standard form for React fragments
react/jsx-handler-namesEnforce event handler naming conventions in JSX
πŸ”§react/jsx-indentValidate JSX indentation
πŸ”§react/jsx-indent-propsValidate props indentation in JSX
βœ”react/jsx-keyReport missing key props in iterators/collection literals
react/jsx-max-depthValidate JSX maximum depth
πŸ”§react/jsx-max-props-per-lineLimit maximum of props on a single line in JSX
πŸ”§react/jsx-newlineRequire or prevent a new line after jsx elements and expressions.
react/jsx-no-bindPrevents usage of Function.prototype.bind and arrow functions in React component props
βœ”react/jsx-no-comment-textnodesComments inside children section of tag should be placed inside braces
react/jsx-no-constructed-context-valuesPrevents JSX context provider values from taking values that will cause needless rerenders.
βœ”react/jsx-no-duplicate-propsEnforce no duplicate props
react/jsx-no-literalsPrevent using string literals in React component definition
react/jsx-no-script-urlForbid javascript: URLs
βœ”πŸ”§react/jsx-no-target-blankForbid target="_blank" attribute without rel="noreferrer"
βœ”react/jsx-no-undefDisallow undeclared variables in JSX
πŸ”§react/jsx-no-useless-fragmentDisallow unnecessary fragments
πŸ”§react/jsx-one-expression-per-lineLimit to one expression per line in JSX
react/jsx-pascal-caseEnforce PascalCase for user-defined JSX components
πŸ”§react/jsx-props-no-multi-spacesDisallow multiple spaces between inline JSX props
react/jsx-props-no-spreadingPrevent JSX prop spreading
react/jsx-sort-default-propsEnforce default props alphabetical sorting
πŸ”§react/jsx-sort-propsEnforce props alphabetical sorting
πŸ”§react/jsx-space-before-closingValidate spacing before closing bracket in JSX
πŸ”§react/jsx-tag-spacingValidate whitespace in and around the JSX opening and closing brackets
βœ”react/jsx-uses-reactPrevent React to be marked as unused
βœ”react/jsx-uses-varsPrevent variables used in JSX to be marked as unused
πŸ”§react/jsx-wrap-multilinesPrevent missing parentheses around multilines JSX

Other useful plugins

Shareable configurations

Recommended

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.

License

ESLint-plugin-React is licensed under the MIT License.

πŸ”ŽExplore PackageπŸ”ŽCDN Script

Score

Popularity76/100
Quality96/100
Maintenance67/100