Wondering what’s next for npm?Check out our public roadmap! »

    eslint-plugin-react

    7.23.2 • Public • Published

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

    Install

    npm i eslint-plugin-react

    DownloadsWeekly Downloads

    8,773,013

    Version

    7.23.2

    License

    MIT

    Unpacked Size

    793 kB

    Total Files

    116

    Last publish

    Collaborators

    • avatar
    • avatar