npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2021 – Pkg Stats / Ryan Hefner

eslint-plugin-react

v7.24.0

Published

React specific linting rules for ESLint

Downloads

37,860,090

Readme

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"
  ]

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

| ✔ | 🔧 | Rule | Description | | :---: | :---: | :--- | :--- | | | | react/boolean-prop-naming | Enforces consistent naming for boolean props | | | | react/button-has-type | Forbid "button" element without an explicit "type" attribute | | | | react/default-props-match-prop-types | Enforce all defaultProps are defined and not "required" in propTypes. | | | | react/destructuring-assignment | Enforce consistent usage of destructuring assignment of props, state, and context | | ✔ | | react/display-name | Prevent missing displayName in a React component definition | | | | react/forbid-component-props | Forbid certain props on components | | | | react/forbid-dom-props | Forbid certain props on DOM Nodes | | | | react/forbid-elements | Forbid certain elements | | | | react/forbid-foreign-prop-types | Forbid using another component's propTypes | | | | react/forbid-prop-types | Forbid certain propTypes | | | 🔧 | react/function-component-definition | Standardize the way function component get defined | | | | react/no-access-state-in-setstate | Reports when this.state is accessed within setState | | | | react/no-adjacent-inline-elements | Prevent adjacent inline elements not separated by whitespace. | | | | react/no-array-index-key | Prevent usage of Array index in keys | | ✔ | | react/no-children-prop | Prevent passing of children as props. | | | | react/no-danger | Prevent usage of dangerous JSX props | | ✔ | | react/no-danger-with-children | Report when a DOM element is using both children and dangerouslySetInnerHTML | | ✔ | | react/no-deprecated | Prevent usage of deprecated methods | | | | react/no-did-mount-set-state | Prevent usage of setState in componentDidMount | | | | react/no-did-update-set-state | Prevent usage of setState in componentDidUpdate | | ✔ | | react/no-direct-mutation-state | Prevent direct mutation of this.state | | ✔ | | react/no-find-dom-node | Prevent usage of findDOMNode | | ✔ | | react/no-is-mounted | Prevent usage of isMounted | | | | react/no-multi-comp | Prevent multiple component definition per file | | | | react/no-redundant-should-component-update | Flag shouldComponentUpdate when extending PureComponent | | ✔ | | react/no-render-return-value | Prevent usage of the return value of React.render | | | | react/no-set-state | Prevent usage of setState | | ✔ | | react/no-string-refs | Prevent string definitions for references and prevent referencing this.refs | | | | react/no-this-in-sfc | Report "this" being used in stateless components | | | | react/no-typos | Prevent common typos | | ✔ | | react/no-unescaped-entities | Detect unescaped HTML entities, which might represent malformed tags | | ✔ | 🔧 | react/no-unknown-property | Prevent usage of unknown DOM property | | | | react/no-unsafe | Prevent usage of unsafe lifecycle methods | | | | react/no-unstable-nested-components | Prevent creating unstable components inside components | | | | react/no-unused-prop-types | Prevent definitions of unused prop types | | | | react/no-unused-state | Prevent definition of unused state fields | | | | react/no-will-update-set-state | Prevent usage of setState in componentWillUpdate | | | | react/prefer-es6-class | Enforce ES5 or ES6 class for React Components | | | 🔧 | react/prefer-read-only-props | Require read-only props. | | | | react/prefer-stateless-function | Enforce stateless components to be written as a pure function | | ✔ | | react/prop-types | Prevent missing props validation in a React component definition | | ✔ | | react/react-in-jsx-scope | Prevent missing React when using JSX | | | | react/require-default-props | Enforce a defaultProps definition for every prop that is not a required prop. | | | | react/require-optimization | Enforce React components to have a shouldComponentUpdate method | | ✔ | | react/require-render-return | Enforce ES5 or ES6 class for returning value in render function | | | 🔧 | react/self-closing-comp | Prevent extra closing tags for components without children | | | | react/sort-comp | Enforce component methods order | | | | react/sort-prop-types | Enforce propTypes declarations alphabetical sorting | | | | react/state-in-constructor | State initialization in an ES6 class component should be in a constructor | | | | react/static-property-placement | Defines where React component static properties should be positioned. | | | | react/style-prop-object | Enforce style prop value is an object | | | | react/void-dom-elements-no-children | Prevent passing of children to void DOM elements (e.g. <br />). |

JSX-specific rules

| ✔ | 🔧 | Rule | Description | | :---: | :---: | :--- | :--- | | | 🔧 | react/jsx-boolean-value | Enforce boolean attributes notation in JSX | | | | react/jsx-child-element-spacing | Ensures inline tags are not rendered without spaces between them | | | 🔧 | react/jsx-closing-bracket-location | Validate closing bracket location in JSX | | | 🔧 | react/jsx-closing-tag-location | Validate closing tag location for multiline JSX | | | 🔧 | react/jsx-curly-brace-presence | Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes | | | 🔧 | react/jsx-curly-newline | Enforce consistent line breaks inside jsx curly | | | 🔧 | react/jsx-curly-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes | | | 🔧 | react/jsx-equals-spacing | Disallow or enforce spaces around equal signs in JSX attributes | | | | react/jsx-filename-extension | Restrict file extensions that may contain JSX | | | 🔧 | react/jsx-first-prop-new-line | Ensure proper position of the first property in JSX | | | 🔧 | react/jsx-fragments | Enforce shorthand or standard form for React fragments | | | | react/jsx-handler-names | Enforce event handler naming conventions in JSX | | | 🔧 | react/jsx-indent | Validate JSX indentation | | | 🔧 | react/jsx-indent-props | Validate props indentation in JSX | | ✔ | | react/jsx-key | Report missing key props in iterators/collection literals | | | | react/jsx-max-depth | Validate JSX maximum depth | | | 🔧 | react/jsx-max-props-per-line | Limit maximum of props on a single line in JSX | | | 🔧 | react/jsx-newline | Require or prevent a new line after jsx elements and expressions. | | | | react/jsx-no-bind | Prevents usage of Function.prototype.bind and arrow functions in React component props | | ✔ | | react/jsx-no-comment-textnodes | Comments inside children section of tag should be placed inside braces | | | | react/jsx-no-constructed-context-values | Prevents JSX context provider values from taking values that will cause needless rerenders. | | ✔ | | react/jsx-no-duplicate-props | Enforce no duplicate props | | | | react/jsx-no-literals | Prevent using string literals in React component definition | | | | react/jsx-no-script-url | Forbid javascript: URLs | | ✔ | 🔧 | react/jsx-no-target-blank | Forbid target="_blank" attribute without rel="noreferrer" | | ✔ | | react/jsx-no-undef | Disallow undeclared variables in JSX | | | 🔧 | react/jsx-no-useless-fragment | Disallow unnecessary fragments | | | 🔧 | react/jsx-one-expression-per-line | Limit to one expression per line in JSX | | | | react/jsx-pascal-case | Enforce PascalCase for user-defined JSX components | | | 🔧 | react/jsx-props-no-multi-spaces | Disallow multiple spaces between inline JSX props | | | | react/jsx-props-no-spreading | Prevent JSX prop spreading | | | | react/jsx-sort-default-props | Enforce default props alphabetical sorting | | | 🔧 | react/jsx-sort-props | Enforce props alphabetical sorting | | | 🔧 | react/jsx-space-before-closing | Validate spacing before closing bracket in JSX | | | 🔧 | react/jsx-tag-spacing | Validate whitespace in and around the JSX opening and closing brackets | | ✔ | | react/jsx-uses-react | Prevent React to be marked as unused | | ✔ | | react/jsx-uses-vars | Prevent variables used in JSX to be marked as unused | | | 🔧 | react/jsx-wrap-multilines | Prevent 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.