（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 配置，所以我创建了一个

.eslintignore

文件并将其添加到其中：

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

这解决了我所有的问题。

Answer 3

您应该将

["./.eslintrc.js"]

添加到您的

tsconfig.json

文件中：

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

Answer 4

根据您的 tsconfig

include

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

顺便说一句，您还缺少根目录配置。尝试在

.eslintrc.js

:

中设置根目录

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

然后在

tsconfig.json

中包含或排除cypress文件（根据您的需要）：

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

此外，您也不排除 node_modules 文件夹。我不知道这是有意还是无意。但是，当您定义

exclude

时，它会覆盖默认值，您应该手动排除

node_modules

。

如果您的 tsconfig 不包含根目录中的某些文件（例如

.eslintrc.js

），您必须在

.eslintrc.js

本身中排除它们：

   ignorePatterns: ['.eslintrc.js'],

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

与上面 Ian 建议的

.eslintignore

文件相同。但对于那些不喜欢创建只有一行内容的文件的人来说！

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

欲了解更多信息：

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 5

发生这种情况是因为您可能缺少将 .eslintrc.js 文件包含在 tsconfig.json 包含列表中。 您将其包含在内，错误将得到解决

Answer 6

所以@Ian 的回答对我来说只对了一半。

基本上 tsconfig 会忽略 jest.config.ts，但 eslint 会包含它。

简单的解决方案是添加或创建

.eslintignore

# jest
jest.config.*

这只是告诉 eslint 也忽略这个文件，这正是你想要的。

Answer 7

我遇到了同样的问题，因此在创建单独的 tsconfig.test.json 之后，我在 .eslintrc 文件中使用了覆盖，并且进展顺利。

这是 tsconfig.test.json:

{
  "extends": "./tsconfig.json",
  "include": ["**/__tests__/**/*.test.ts"]
}

这是 .eslintrc：

 {
      "root": true,
      "env": {
        "browser": true,
        "es2021": true
      },
      "plugins": ["@typescript-eslint", "prettier"],
      "extends": ["airbnb", "airbnb-typescript", "airbnb/hooks", "prettier"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json",
        "warnOnUnsupportedTypeScriptVersion": false
      },
      "settings": {
       // some settings
      },
      "rules": {
        // some rules
      },
      "overrides": [
        {
          "files": ["src/**/*.ts"],
          "parserOptions": {
            "project": "./tsconfig.json"
          }
        },
        {
          "files": ["__tests__/**/*.test.ts"],
          "parserOptions": {
            "project": "./tsconfig.test.json"
          }
        }
      ]
    }

基本上，这里发生的事情是，您的 ESLint 配置现在将包含适当的覆盖，以便为您的主项目文件和测试文件使用不同的 TypeScript 配置。