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: /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 mand 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?

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 mand 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?

• javascript
• reactjs
• eslint

• I dont know much about eslint, but I'm willing to bet that { "eslintConfig": json you have is NOT for a .eslintrc.json file – TKoL Commented Sep 14, 2020 at 15:50
• That's the code in the documentation, if it's not for a .eslintrc I don't know where to put it! – ste Commented Sep 14, 2020 at 16:01
• I find it really, really frustrating that so much documentation around react and the surrounding tools doesn't actually tell you what file to put their example json in. I feel like it's a huge problem in the node.js tooling munity, and probably the dev munity at large. – TKoL Commented Sep 14, 2020 at 16:04

2 Answers 2

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

You can simply add plugins rules and configs inside package.json without creating .eslintrc.json and env variables