eslint-plugin-react
    Overview
    Documentation
    Insights
    Code
    Contributors
    Dependencies
    Alternatives

eslint-plugin-react

React specific linting rules for ESLint

7.14.3  •  Published 4 months ago  •  by Yannick Croissant  •  MIT License

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

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.

Popularity

Weekly Downloads
3.9M
Stars
5.8K

Maintenance

Development

Last ver 4 months ago
Created 5 years ago
Last commit 19 days ago
19 hours between commits

Technology

Node version: 12.4.0
633.2K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

162 contributors
Jordan Harband
Maintainer, 296 commits, 402 merges, 9 PRs
Yannick Croissant
Maintainer, 82 commits, 222 merges, 2 PRs
Works at algolia
Joachim Seminck
79 commits, 33 PRs
Works at Pipedrive
Alex Zherdev
66 commits, 37 PRs
Works at acl-services
Ev Haus
59 commits
Joe Lencioni
Maintainer, 5 commits, 38 merges, 36 PRs
Works at Airbnb

Tags

eslint
eslint-plugin
eslintplugin
react
Ready for the next level?
Join Devstore's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
© 2019 Devstore, Inc.
Devstore helps developers find and use open-source packages, so they can focus on building amazing things