mmazzarolo / eslint-plugin-react-app

ESLint configuration used by Create React App

eslint-plugin-react-app

A minimal set of easy to install ESLint rules for your project: just install a single NPM package, add it to your .eslintrc, and you'll be all set.

This plugin exposes the ESLint configuration used by Create React App without the need of declaring all its dependencies.
Use it if you need a simple and tested ESLint configuration but you don't want to install a bunch of dependencies.
It also works in React Native out of the box.

Setup

1. Install it using npm: npm install --development eslint eslint-plugin-react-app.
2. Extend plugin:react-app/recommended in your .eslintrc.

Example .eslintrc:

{
  "extends": ["plugin:react-app/recommended"]
}

3. You're done!

Optional - Configuring the rules

If you want to change a rule of an included plugin (for example of eslint-plugin-react) you must prefix the rule with react-app/ (for preventing namespace collisions).
For example:

{
  "extends": ["plugin:react-app/recommended"],
  "rules": {
    "react-app/react/react-in-jsx-scope": ["warn"]
  }
}

Optional - Adding Prettier

This plugin works nicely alongside Prettier.
Install it with npm install --development prettier eslint-config-prettier eslint-plugin-prettier.
And setup your .eslintrc this way:

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "plugins": ["prettier"]
}

Included plugins  

The currently included create-react-app plugins are the following:

• eslint-plugin-import
• eslint-plugin-flowtype
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks
• @typescript-eslint/eslint-plugin

Acknowledgements

Thanks to fson and its Create React App pull request for the initial idea of this plugin.
Thanks to gaeron and everyone who contributed to Create React App.

Disclaimer

This project is not officially maintained (nor officially "supported") by the Create React App team.

eslint-plugin-react-app's Issues

Upgrade to babel-eslint 10

I got this issue:
[email protected]" has incorrect peer dependency "[email protected]".

I believe we can upgrade eslint plugin react app to babel-eslint 10

Property "overrides" in the wrong type

Hi.

Somehow I'm getting errors from ESLint.

Error message:

.eslintrc.js

module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
  extends: [
    "react-app",
    "airbnb",
    "prettier",
    "prettier/react",
    "prettier/flowtype",
  ],
  plugins: ["prettier", "flowtype"],
}

Incorrect peer dependency

warning "eslint-plugin-react-app > [email protected]" has incorrect peer dependency "eslint-plugin-jsx-a11y@^5.1.1".

when running

yarn add --dev eslint@^4.1.1 eslint-plugin-react-app

I get the above warning. I also have to specify the eslint version because it doesn't look like the latest eslint version 5 is supported.

Any ideas? I can't see where this peer dependency is coming from. It's not specified in the eslint-config-react-app package.json as needing that version.

Some fundamental knowledge about the recommended config

Hi, I hope to ask some basic questions to understand the recommended rule set (plugin:react-app/recommended) of this package :

1. In a non-CRA project, if I install `eslint-config-react-app`, plus manually install all the plugins, will I get mostly identical rules as from this package ? In other words:

"extends": [
  "react-app", // same as ↓ if I install all the plugins?
  "plugin:react-app/recommended"
]

2. In a CRA project where env var EXTEND_ESLINT=true is set, is 1 still true, with the only difference being that I don't need to manually install any plugins?

3. Some plugins have their own "recommended" configs, are they most the same as in the CRA config? In other words:

"extends": [
  "plugin:react-app/recommended",
  "plugin:react/recommended", // same as covered above ↑ ?
  "plugin:react-hooks/recommended", // same as covered above ↑ ?
  "plugin:@typescript-eslint/recommended" // same as covered above ↑ ? (I guess this one may be not)
]

4. Does this config use the @typescript-eslint/parser?

{
  "parser": "@typescript-eslint/parser"
}

If yes, what if I write js instead of ts? My assumption is that this parser is totally capable of parsing js too, but I'm not sure.

5. CRA includes jest out of the box, but it seems neither CRA nor this plugin includes eslint-plugin-jest, correct? Therefore if I want to lint my tests, I should manually install the jest plugin and extend plugin:jest/recommended myself, no matter if I use CRA of this plugin, correct?

Thanks so much for your time!!