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

In the create-react-app project package.json is ready, you just need to add the rules field.

package.json

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ],
+ "rules": {
+    "react/self-closing-comp": 1
+  }
},

It's important to note that any rules that are set to "error" will stop the project from building.

create-react-app uses eslint-config-react-app, which contains almost all popular eslint packages.

• eslint-plugin-flowtype
• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-testing-library

eslint-config-react-app github https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app

eslint-config-react-app npm https://www.npmjs.com/package/eslint-config-react-app

Answer 3

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"
        }
      }
    ]
  }
}

Answer 4

its not hard, just follow these steps:

1. npm i -D eslint eslint-plugin-react
2. npx eslint --init
3. edit the generated config file, for example .eslintrc.json
4. put your rules in the "rules": { ... } section