(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 函数会抛出这个 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

我尝试重新配置我的.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,
    },
  },
};

- T. Duke

Answer 1

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

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

- max-tong

---

很遗憾，对我没有起作用。 - T. Duke

对我来说起作用了。我正在AWS Amplify上部署它，但是构建失败了。 - Master

删除它将导致 eslint 推荐的插件无法工作。 - ImBIOS

这是一种潜在的鲁莽行为 - 这样做将禁用ESLint使用带有类型信息的规则的能力。（有关更多信息，请参见文档。）Roman Rokon的答案是一种较少破坏性的解决方案。 - Avi Nerenberg

在我的情况下，问题出在文件名上，我在同一个目录下有两个文件：router.ts 和 Router.tsx。而且在 tsconfig.json 中，include 设置为 src/**/*。我只好将其中一个文件重命名。 :| - Hitesh Kumar

Answer 2

这是我最终放在我的 .eslintrc.js 文件中的内容：

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

可能是项目需要使用./tsconfig.json而不是tsconfig.json。我的tsconfig文件位于项目根目录下。

这引起了更多的错误，如babel配置方面的lint错误，因此我创建了一个.eslintignore文件，并在其中添加了这些内容：

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

这解决了我所有的问题。

- Ian

---

在大多数情况下，这可能是解决方案。该错误字面上解释了ES Lint正在运行TypeScript检查，并使用你在TSConfig（tsconfig.json）中提供的TypeScript配置来检查一组文件，但是所提供的TSConfig排除了这些文件。自然的解决方案是使用.eslintignore同样将这些文件从ES Lint中排除。 - JacobF

这个问题对我来说已经解决了（Vite + React + TS 技术栈）。 - AdamKniec

这是最好的答案。不要忘记 tsconfigRootDir。 - Hinton

Answer 3

你应该在tsconfig.json文件中添加["./.eslintrc.js"]：

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

- michal

---

但我不想让 TypeScript 处理我的 .eslintrc.js 文件，它是一个开发配置文件。 - Klesun

@Klesun，错误信息还说如果你想这样做的话，可以从你的eslint文件中删除它。 - Ian

Answer 4

根据您的tsconfig中的include，您已经包含了来自/cypress文件夹的.cy.ts文件。但错误是关于您根目录/component文件夹中的文件。

顺便提一下，您还缺少根目录配置。请尝试在.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-those-tsconfigs-include-this-file

- Roman Rokon

Answer 5

我正在使用Vite，我遇到了几乎相同的问题，并通过更改tsconfig文件中的include来解决它。

"include": [
    "vite.config.ts",
    ".eslintrc.cjs",
    "src"
  ], 

- mohamed daadaa

---

这对我有用，但是对于找到这个答案的人，我要提个醒：在我的情况下，我是用eslintrc.js而不是eslintrc.cjs来解决这个问题的。 - undefined

Answer 6

尝试了所有的答案后，我发现只需添加"tsconfigRootDir"而无需更改其他任何内容，这对我起到了作用。

parserOptions: {
  project: true,
  tsconfigRootDir: __dirname, // added
},

- Johnathon

Answer 7

这是因为你可能忘记在tsconfig.json的include列表中包含你的.eslintrc.js文件。 你把它包含进去，错误就会解决。

- Ashish Chaudhary

Answer 8

所以 @Ian 的答案对我来说是一半正确的。

基本上，tsconfig 忽视了 jest.config.ts，但 eslint 包括了它。

简单解决方法是添加或创建 .eslintignore

# jest
jest.config.*

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

- BrinkDaDrink

Answer 9

我遇到同样的问题，所以我在创建了一个单独的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配置。

- lighthouse

---

但是当尝试通过 "npx jest" 运行测试时，我遇到了这个错误： ● Test suite failed to run Jest 遇到了一个意外的标记 Jest 无法解析文件。这通常发生在您的代码或其依赖使用非标准 JavaScript 语法，或者 Jest 没有配置以支持此类语法时。 Out of the box Jest 支持 Babel，并将根据您的 Babel 配置将文件转换为有效的 JS。 默认情况下，转换器会忽略 "node_modules" 文件夹。``` - lighthouse

Answer 10

我有一个使用create-react-app创建的react.js项目。我有一个包含react项目的src文件夹和包含cypress测试的cypress文件夹。我通过将cypress文件夹添加到我的tsconfig.json文件中来解决了这个问题。

{
  "compilerOptions": {
    // ... some standard config stuff for react
  },
  "include": [
    "src",
    "cypress" // <--- added this and now my eslint also works for `cypress` folder
  ]
}

- Ruslan Plastun