Override eslint settings in non-ejected create-react-app?

Question

I've found a ton of "solutions" for this, ranging from simple package.json additions to custom hack modules, but none worked for me.

I simply want to override the eslint settings for an out-of-the-box, NON ejected create-react-app.

Namely, the rule "no-unused-vars".

I'm using Visual Studio Code.

Answer 1

I seem to have fixed this accidentally just trying combinations of things I found online. This seems to have worked.

1) I created a .env file in the project root (where the package.json file is). In it I have:

// .env file

EXTEND_ESLINT = true

2) Then I created a .eslintrc file (no extension) in my project root and added this:

// .eslintrc file (no extension)
{
  "extends": [
    "react-app"
  ],
  "rules": {
    "no-unused-vars": "off"
  }
}

Answer 2

The library now supports extending the pre-defined ESLint rules natively, see the relevant docs.

---

The gist of it is that you will have to set the EXTEND_ESLINT environment variable, and then add your own ESLint config to the project root, optionally extending create-react-app's:

{
  "eslintConfig": {
    "extends": ["react-app"],
    "overrides": [
      {
        "files": ["**/*.js"],
        "rules": {
          "no-unused-vars": "warn"
        }
      }
    ]
  }
}