Where can I find .eslintrc in CRA?

Question

When using npx create-react-app appname, the react-scripts package which is installed includes an eslint dependency with "a minimal set of rules that find common mistakes." I want to use prettier and eslint but I can't find information on which, if any, eslint plugins are also installed as part of CRA or find where the base ESLint config to see what is included. I will extend the base ESLint config if needed but the CRA docs say it is Experimental so I want to avoid it if I can.

EDIT: More detailed information

Without manually installing ESLint as a dependency I get (somewhat expected) missing peer dependency errors for all of the plugins and config dependencies.

With ESLint installed as a dependency I get a CRA error:

    > react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  ~\client\node_modules\eslint (version: 7.2.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

*If* it exists it will be in the root directory of the project. It's sometimes also named `.eslintrc.json`. If it doesn't exist you can simply create a new empty file with that name and follow any setup/configuration instructions. — Drew Reese, Jun 11 '20 at 07:18
Adding .eslintrc.json to the root dir won't affect the linting done 'under the hood' will it? It would just be editor-intergration and wouldn't replace any linting rules CRA includes? It's great if that's the case, I just want to check. — dotDone, Jun 11 '20 at 07:43
If you install eslint and the related plugings, you can just define the eslintrc file on the root directory of your project. — wentjun, Jun 11 '20 at 07:50

David Bradshaw · Accepted Answer · 2021-02-24T16:22:47.597

Package.json in your CRA app contains this

"eslintConfig": {
  "extends": "react-app"
},

You should just be able to create a .eslintrc file and that will get picked up instead.

The config can be found at https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app

It uses these plugins

['import', 'flowtype', 'jsx-a11y', 'react', 'react-hooks'].

Personally think you would be better off with the Airbnb eslint rules or if you want something more comprehensive checkout eslint-config-auto

Where can I find .eslintrc in CRA?

1 Answers1