Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where can I find .eslintrc in CRA?

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.
like image 932
dotDone Avatar asked Jun 11 '20 07:06

dotDone


People also ask

Where is .eslintrc located?

Windows location: C:\Users\you\. eslintrc.

Does CRA come with ESLint?

Because Create React App comes with ESLint already integrated. They use their own sharable ESLint configuration and this can be found under the eslintConfig object in package.

Where is ESLint config file in react?

The “lint” command will run ESLint inside every file in the “src/”, even if your “src/” folder contains multiple directories in it, this regex command will go down recursively on them and run ESLint; If some problems are reported by ESLint which are auto-fixable, then “lint:fix” command will do those auto-fixes.

Is ESLint included in Create react app?

Install the ESLint packages for TypeScript and Jest support. Note, ESLint is installed with create-react-app, so you don't need to explicitly install it. Then install the packages for Airbnb config.


Video Answer


1 Answers

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

like image 97
David Bradshaw Avatar answered Oct 10 '22 03:10

David Bradshaw