How to use the create-react-app 3.1.0 eslint customisation?

Question

Edit: This was a bug in 3.1.0 - upgrade to 3.1.1+ to get a working version of this feature.

create-react-app 3.1.0 is supposed to have support for customising the eslint warnings, as per: https://github.com/facebook/create-react-app/pull/7036

The documentation is here: https://facebook.github.io/create-react-app/docs/setting-up-your-editor#experimental-extending-the-eslint-config

I believe the rule setting I have in my package.json is correct because IDEA picks it up and no longer dislays the dot-location warning in the editor.

But npm start still complains with:

./src/Auth/AuthenticationProvider.tsx
  Line 135:  Expected dot to be on same line as property  dot-location

My package.json is as per the documentation and I've added the EXTEND_ESLINT variable to the .env file.

My package.json config:

"eslintConfig": {
  "extends": [
    "react-app"
  ],
  "rules": {
    "dot-location": "off"
  }
},

The environment variable is set in my .env file.

And the example failing source code looks like:

   props.auth0Client.loginWithRedirect().
      catch((e)=>{errorHandler(e)});

What am I doing wrong?

Am I misunderstanding how eslint config works, or maybe I'm wrong about what this new feature of create-react-app is actually supposed to do?

Please note: I don't want to add annotations to my code everywhere to disable the warning - the question is about customising the eslint config.

Leonhardt Koepsell Leonhardt Koepsell · Accepted Answer · 2019-08-11T22:21:32

It appears you are not doing anything wrong and there is a bug in create-react-app 3.1.0. If you want to track progress, an issue has been filed in GitHub.

How to use the create-react-app 3.1.0 eslint customisation?

1 Answers