How to Extend Eslint to work with create-react-app

I’m working on a React application and I would like to have a linter set up so that I can see all the warning/errors in the console.

The docs doesn’t say much: https://create-react-app.dev/docs/setting-up-your-editor/

I have added EXTEND_ESLINT=true in my .env.dev file and I have created a .eslintrc.json file as well, with the following content (taken from the docs):

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

Every rule I try to add won’t do anything, I still see no warnings in the console and on top of that if I try to run the linter from the command line:

npx eslint ./src

I get the following error:

ESLint configuration in .eslintrc.json is invalid:
    - Unexpected top-level property "eslintConfig".

What am I missing?

Answer

You can either create a .eslintrc.js file inside your src folder, with this syntax:

module.exports = {
    extends: ["react-app", "shared-config"],
    rules: {
      "additional-rule": "warn"
    },
    overrides: [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }

Or add this to your package.json (not a .eslintrc.json file):

"eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }