Búsqueda de sitios web

reactjs - (ESLint/Cypress): Error de análisis: ESLint fue configurado para ejecutarse en `<tsconfigRootDir>/component/TestComponent.cy.ts` usando `parserOptions.project`

Estoy configurando un nuevo proyecto con Remix (remix.run) y estoy intentando configurar Cypress/ESLint para pruebas de componentes. Tengo un TestComponent.cy.ts con algo de código de plantilla:

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

Sin embargo, la función describe lanza este 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

He intentado reconfigurar mi .tsconfig.json y .eslintrc.js sin éxito. Actualmente, así es como se ven esos archivos:

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,
    },
  },
};

Respuesta #1

También me encontré con el mismo problema, resolví el problema eliminando la propiedad project bajo parserOptions

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

Respuesta #2

Esto es lo que terminé poniendo en mi .eslintrc.js:

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

Puede que el proyecto necesitara ser ./tsconfig.json en lugar de tsconfig.json. Mi archivo tsconfig está en la raíz del proyecto.

Y esto provocó más errores al analizar cosas como la configuración de Babel, así que creé un archivo .eslintignore y los añadí allí:

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

Esto resolvió todos mis problemas.

Respuesta #3

Según tu include de tsconfig, has incluido los archivos .cy.ts de tu carpeta /cypress. Pero el error se trata del archivo en tu carpeta raíz /component.

Por cierto, también te falta la configuración del directorio raíz. Intenta establecer el directorio raíz en .eslintrc.js:

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

Luego incluye o excluye los archivos de cypress (dependiendo de tus necesidades) en tsconfig.json:

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

Además, no estás excluyendo la carpeta node_modules. No sé si es intencional o no. Pero cuando defines exclude, se sobrescribe el valor predeterminado, y deberías excluir node_modules manualmente.

Si tu tsconfig no incluye algunos archivos del directorio raíz (por ejemplo, .eslintrc.js), tienes que excluirlos en .eslintrc.js mismo:

   ignorePatterns: ['.eslintrc.js'],

De esta manera no tienes que incluir archivos solo de desarrollo en tu tsconfig.

Es lo mismo que el archivo .eslintignore que Ian sugirió arriba. ¡Pero para aquellos que no les gusta crear archivos con literalmente una línea de contenido!

Espero que te ayude a ti o a alguien más en el futuro.

Para más información:

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

Respuesta #4

Deberías agregar ["./.eslintrc.js"] a tu archivo tsconfig.json:

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

Artículos relacionados