(ESLint/Cypress)：解析错误：ESLint 被配置为<tsconfigRootDir>使用 'parserOptions.project' 在 '/component/

我正在使用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,
},
},
};

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

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

这就是我最后在。eslintrc.js中写的:

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

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

这会带来更多的错误，比如babel config所以我创建了一个.eslintignore文件并添加了这些:

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

这解决了我所有的问题。

你应该把["./.eslintrc.js"]添加到你的tsconfig.json文件中:

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

根据您的tsconfiginclude，您已经包含了.cy。/cypress文件夹中的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-those-tsconfigs-include-this-file

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

所以@Ian的回答对了一半。

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

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

# jest
jest.config.*

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

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

我正在使用Vite，我有几乎相同的问题，我通过改变来解决它包含在tsconfig文件中:

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

相关内容

最新更新

热门标签：