Skip to content

tobiaswaltl/eslint-plugin-react

Β 
Β 

Repository files navigation

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@7 --save-dev

If you installed eslint globally, you have to install the React plugin globally too. Otherwise, install it locally (strongly preferred)

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

βœ” πŸ”§ 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-arrow-function-lifecycle Lifecycle methods should be methods on the prototype, not class fields
βœ” 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-invalid-html-attribute Forbid attribute with an invalid values`
βœ” react/no-is-mounted Prevent usage of isMounted
react/no-multi-comp Prevent multiple component definition per file
react/no-namespace Enforce that namespaces are not used in React elements
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-class-component-methods Prevent declaring unused methods of component class
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-exact-props Prefer exact proptype definitions
πŸ”§ 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.

About

React specific linting rules for ESLint

Resources

License

Security policy

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%