(ESLint/赛普拉斯): 解析错误: ESLint 被配置为在 ` 上运行<tsconfigrootdir> /component/TestComponent.cy.ts` 使用 `parserOptions.project`</tsconfigrootdir>

Question

I am setting up a new project with Remix (remix.run) and I am trying to configure Cypress/ESLint for component testing. I have a TestComponent.cy.ts with some boilerplate code:

describe('TestComponent.cy.ts', () => {
  it('playground', () => {
    // cy.mount()
  })
})

However, the describe function throws this Error:

    Parsing error: ESLint was configured to run on `<tsconfigRootDir>/component/TestComponent.cy.ts` using `parserOptions.project`: <tsconfigRootDir>/../../../../../../users/tduke/desktop/dev/blog/cypress/tsconfig.json
    However, that TSConfig does not include this file. Either:
    - Change ESLint's list of included files to not include this file
    - Change that TSConfig to include this file
    - Create a new TSConfig that includes this file and include it in your parserOptions.project

I have tried to reconfigure my .tsconfig.json and .eslintrc.js to no avail. Currently, this is what those files look like:

tsconfig.json:

{
  "exclude": ["./cypress", "./cypress.config.ts"],
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "./cypress/component/*.cy.ts", "./cypress/**/*.cy.ts", 
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "types": ["vitest/globals"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "skipLibCheck": true,

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

.eslintrc.js:

/** @type {import('@types/eslint').Linter.BaseConfig} */
module.exports = {
  extends: [
    "@remix-run/eslint-config",
    "@remix-run/eslint-config/node",
    "@remix-run/eslint-config/jest-testing-library",
    "prettier",
  ],
  env: {
    "cypress/globals": true,
  },
  parserOptions: {
    project: './tsconfig.json'
  },
  plugins: ["cypress"],
  // We're using vitest which has a very similar API to jest
  // (so the linting plugins work nicely), but we have to
  // set the jest version explicitly.
  settings: {
    jest: {
      version: 28,
    },
  },
};

Answer 1

I also encountered the same problem, I solved the problem by removing the project property under parserOptions

 parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 12, sourceType: 'module', // project: 'tsconfig.json', tsconfigRootDir: __dirname, },

Answer 2

You should add ["./.eslintrc.js"] to your tsconfig.json file:

{
   "include": ["./.eslintrc.js"],
   //...
}

Answer 3

This is what I ended up putting in my.eslintrc.json:

module.exports = {
  ...
  parserOptions: {
    parser: '@typescript-eslint/parser',
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
};

It may have been that the project needed to be ./tsconfig.json instead of tsconfig.json . My tsconfig file is in the project root.

And this brought up some more errors linting things like babel config so I created an .eslintignore file and added those in there:

.eslintrc.js
ios/
android/
*.config.js

This solved all my issues.