I'm a developer

eslint-plugin-react

by yannickcr

yannickcr / eslint-plugin-react

React specific linting rules for ESLint

6.7K Stars 1.9K Forks Last release: 4 days ago (v7.21.5) MIT License 2.6K Commits 160 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

ESLint-plugin-React

Maintenance Status NPM version Build Status Dependency Status Coverage 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 ), 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  for linking, eg. 
      "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

JSX-specific rules

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.

The rules enabled in this configuration are:

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.