(ESLint/Cypress)：解析错误：ESLint 被配置为使用“parserOptions.project”在“<tsconfigRootDir>/component/TestComponent.cy.ts”上运行

Question

我正在使用 Remix (remix.run) 设置一个新项目，并尝试配置 Cypress/ESLint 进行组件测试。我有TestComponent.cy.ts一些样板代码：

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

但是，该describe函数会抛出此错误：

    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

我尝试重新配置我的.tsconfig.json，但.eslintrc.js没有成功。目前，这些文件如下所示：

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

project我也遇到了同样的问题，我通过删除下面的属性解决了问题parserOptions

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

Answer 2

这就是我最终放入 .eslintrc.js 中的内容：

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

该项目可能需要./tsconfig.json代替tsconfig.json. 我的 tsconfig 文件位于项目根目录中。

这会带来更多错误，例如 babel config 之类的 linting，所以我创建了一个.eslintignore文件并将其添加到其中：

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

这解决了我所有的问题。

Answer 3

根据您的 tsconfig，include您已包含 /cypress 文件夹中的 .cy.ts 文件。但错误与根/组件文件夹中的文件有关。

顺便说一句，您还缺少根目录配置。尝试在以下位置设置根目录.eslintrc.js：

parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },

然后在以下位置包含或排除 cypress 文件（根据您的需要）tsconfig.json：

...
"**/*.cy.ts"
...

此外，您也不排除 node_modules 文件夹。我不知道这是有意还是无意。但是当您定义 时exclude，它会覆盖默认值，您应该node_modules手动排除。

如果您的 tsconfig 不包含根目录中的某些文件（例如.eslintrc.js），您必须将它们本身排除.eslintrc.js：

   ignorePatterns: ['.eslintrc.js'],

这样您就不必在 tsconfig.json 中包含仅开发文件。

.eslintignore它与上面 Ian 建议的文件相同。但对于那些不喜欢创建只有一行内容的文件的人来说！

希望它对您或其他人将来有所帮助。

欲了解更多信息：

https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-那些 tsconfigs-include-this-file

Answer 4

您应该添加["./.eslintrc.js"]到您的tsconfig.json文件中：

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