title: Extend TypeScript ESLint config from Create React App
body: <p>I have followed this guide to extend my ESLint config.</p>
  <p><a href="https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config" rel="nofollow noreferrer">https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config</a></p>
  <p>The documentation states that <code>Note that any rules set to &quot;error&quot; will stop the project from building</code>. I have added a <code>.env</code> file with <code>EXTEND_ESLINT=true</code> in the same folder as my <code>package.json</code> file.</p>
  <p><a href="https://create-react-app.dev/docs/advanced-configuration/" rel="nofollow noreferrer">https://create-react-app.dev/docs/advanced-configuration/</a></p>
  <p>As soon as this file was added I stopped getting warning from the command <code>npm run build</code>, even when using the default values in package.json:</p>
  <p><a href="https://i.stack.imgur.com/Ziv2w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ziv2w.png" alt="enter image description here" /></a></p>
  <pre><code>&quot;eslintConfig&quot;: {
    &quot;extends&quot;: &quot;react-app&quot;
  },
  </code></pre>
  <p>If I set <code>.env</code> file to <code>EXTEND_ESLINT=false</code> the warnings start to show up again.</p>
  <p><a href="https://i.stack.imgur.com/JOv15.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JOv15.png" alt="enter image description here" /></a></p>
  <p>The reason for doing it in the first place is because I want to add the <code>no-multiple-empty-lines</code> rule like this:</p>
  <pre><code>&quot;eslintConfig&quot;: {
    &quot;extends&quot;: [ &quot;react-app&quot; ],
    &quot;rules&quot;: {
      &quot;no-multiple-empty-lines&quot;: [
        &quot;error&quot;,
        {
          &quot;max&quot;: 1,
          &quot;maxEOF&quot;: 0,
          &quot;maxBOF&quot;: 0
        }
      ]
    }
  },
  </code></pre>
  <p><a href="https://eslint.org/docs/rules/no-multiple-empty-lines" rel="nofollow noreferrer">https://eslint.org/docs/rules/no-multiple-empty-lines</a></p>
  <p>I think the config is correct because when I add this rule the following command will show expected result:</p>
  <pre><code>npx eslint . --ext .js,.jsx,.ts,.tsx
  </code></pre>
  <p>Before config change:</p>
  <p><a href="https://i.stack.imgur.com/qow0F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qow0F.png" alt="enter image description here" /></a></p>
  <p>After config change:</p>
  <p><a href="https://i.stack.imgur.com/lbeOk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lbeOk.png" alt="enter image description here" /></a></p>
  <p>Reading up on the <code>.env</code> file it says that <code>npm run build</code> will read files in the following order: <code>.env.production.local, .env.production, .env.local, .env</code>. Since I only have <code>.env</code> it should pick it up. Documentation also states this above <code>EXTEND_ESLINT</code> - <code>You do not need to declare REACT_APP_ before the below variables as you would with custom environment variables.</code></p>
  <p><a href="https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env" rel="nofollow noreferrer">https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env</a></p>
  <p>I have read this thread as well but I can't see where I wen't wrong:</p>
  <p><a href="https://stackoverflow.com/questions/59633005/how-is-eslint-integrated-into-create-react-app">How is ESLint integrated into Create React App?</a></p>
  <p>If I edit the <code>scripts</code> section in <code>package.json</code> to <code>&quot;build&quot;: &quot;set EXTEND_ESLINT=true &amp;&amp; react-scripts build&quot;,</code> I will get the normal warnings but my added rule wont be executed anyway.</p>
  <p><a href="https://i.stack.imgur.com/SpmBE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SpmBE.png" alt="enter image description here" /></a></p>