title: How to Extend Eslint to work with create-react-app
body: <p>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.</p>
  <p>The docs doesn't say much: <a href="https://create-react-app.dev/docs/setting-up-your-editor/" rel="nofollow noreferrer">https://create-react-app.dev/docs/setting-up-your-editor/</a></p>
  <p>I have added <code>EXTEND_ESLINT=true</code> in my <code>.env.dev</code> file and I have created a <code>.eslintrc.json</code> file as well, with the following content (taken from the docs):</p>
  <pre><code>{
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [&quot;react-app&quot;, &quot;shared-config&quot;],
      &quot;rules&quot;: {
        &quot;additional-rule&quot;: &quot;warn&quot;
      },
      &quot;overrides&quot;: [
        {
          &quot;files&quot;: [&quot;**/*.ts?(x)&quot;],
          &quot;rules&quot;: {
            &quot;additional-typescript-only-rule&quot;: &quot;warn&quot;
          }
        }
      ]
    }
  }
  </code></pre>
  <p>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:</p>
  <pre><code>npx eslint ./src
  </code></pre>
  <p>I get the following error:</p>
  <pre><code>ESLint configuration in .eslintrc.json is invalid:
      - Unexpected top-level property &quot;eslintConfig&quot;.
  </code></pre>
  <p>What am I missing?</p>