title: Setting up ESLint for a Typescript Project using React, React Testing Library, and Cypress
body: <p>It seems that every time I start using a new library of some sort I run into problems with ESLint, and I can never truly figure out why. I stumble through until the errors and warnings go away, and then deal with it all again later. I'm hoping that I can get some answers on how it's supposed to work here.</p>
  <p>I have a React project that is using Typescript. We use react-testing-library for tests (with Jest types) as well as Cypress for testing (with Cypress types). Jest and Cypress will conflict as they use a lot of the same keywords but from different libraries (ie. <code>describe</code>, <code>expect</code>, <code>context</code>, etc.).</p>
  <p>Furthermore, with cypress is is possible to define your own functions which will extend the global <code>cy</code> object that is used in all cypress tests, however this must also be typed and requires you to write your own definition files.</p>
  <p>Everything was going well until I tried to add my own type definitions, at which point it started complaining again. (I would like to note that my project does compile and run as expected with everything I'm doing at the moment. It is simply ESLint that isn't happy).</p>
  <p>The main issue I'm trying to solve is why the type definition doesn't seem to be included in a project. I'm receiving the following error:</p>
  <pre><code>Parsing error: &quot;parserOptions.project&quot; has been set for @typescript-eslint/parser.
  The file does not match your project config: cypress\support\index.d.ts.
  The file must be included in at least one of the projects provided.
  </code></pre>
  <p>As well as whether there is a better way to lay this out.</p>
  <p>Thanks to anyone who actually takes the time to read this and make an attempt.</p>
  <p>The folder structure looks like this:</p>
  <pre><code>cypress
  - fixtures
  - integrations
  - - file.spec.ts &lt;- Uses the custom functions in a test
  - plugins
  - support
  - - commands.ts &lt;- Contains my custom functions
  - - index.d.ts  &lt;- Types for custom functions
  - - index.ts
  - .eslintrc.js (A)
  - tsconfig.json (B)
  src (contains all the jest tests)
  .eslintrc.js (C)
  tsconfig.json (D)
  tsconfig.eslint.json
  </code></pre>
  <p><code>.eslintrc.js (A)</code></p>
  <pre><code>module.exports = {
    extends: ['../.eslintrc.js'],
    parserOptions: {
      project: 'cypress/tsconfig.json',
    },
  }
  </code></pre>
  <p><code>tsconfig.json (B)</code></p>
  <pre><code>{
    &quot;extends&quot;: &quot;../tsconfig.json&quot;,
    &quot;compilerOptions&quot;: {
      &quot;noEmit&quot;: true,
      // be explicit about types included
      // to avoid clashing with Jest types
      &quot;types&quot;: [&quot;cypress&quot;, &quot;cypress-axe&quot;],
      &quot;allowJs&quot;: true
    },
    &quot;include&quot;: [&quot;.eslintrc.js&quot;, &quot;../node_modules/cypress&quot;, &quot;./**/*&quot;]
  }
  </code></pre>
  <p><code>.eslintrc.js (C)</code></p>
  <pre><code>module.exports = {
    parser: '@typescript-eslint/parser',
    root: true,
    env: {
      es6: true,
      node: true,
      browser: true,
    },
    parserOptions: {
      ecmaVersion: 6,
      sourceType: 'module',
      tsconfigRootDir: __dirname,
      project: './tsconfig.eslint.json',
      ecmaFeatures: {
        jsx: true,
      },
    },
    plugins: ['react', 'react-hooks', '@typescript-eslint', 'cypress'],
    rules: {
      'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
      ...
    },
  }
  </code></pre>
  <p><code>tsconfig.json (D)</code></p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [&quot;es6&quot;, &quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;strict&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;baseUrl&quot;: &quot;src&quot;,
      &quot;types&quot;: [&quot;jest&quot;]
    },
    &quot;include&quot;: [
      &quot;build-system&quot;,
      &quot;src&quot;,
      &quot;.eslintrc.js&quot;,
      &quot;pretty.js&quot;,
      &quot;gulpfile.js&quot;
    ],
    &quot;exclude&quot;: [&quot;node_modules&quot;, &quot;src/*.test.ts&quot;, &quot;src/*.test.tsx&quot;]
  }
  </code></pre>
  <p><code>tsconfig.eslint.json</code></p>
  <pre><code>{
    // extend your base config so you don't have to redefine your compilerOptions
    &quot;extends&quot;: &quot;./tsconfig.json&quot;,
    &quot;compilerOptions&quot;: {
      &quot;noEmit&quot;: true
    },
    &quot;exclude&quot;: []
  }
  </code></pre>