Error de “no-extraneous-dependencies” de Eslint con npm workspaces.

He configurado mi monorepo utilizando espacios de trabajo de NPM con la siguiente estructura general:

root
common // Paquete compartido, llamado @company/common
src
…
package.json
tsconfig.json
web // Paquete de ReactJS, llamado @company/web
config
…
public
…
src
…
package.json
tsconfig.json
mobile // Paquete de React Native, llamado @company/mobile
…
package.json
tsconfig.json
.eslintrc.json
.prettierrc
package.json
tsconfig.json
tsconfig.base.json

Todos mis paquetes están destinados a ser privados y han sido marcados como tal en sus respectivos archivos package.json.

Logré configurarlo de manera exitosa de tal manera que pueda escribir código como este en los espacios de trabajo web y mobile:

import { ITestInterface } from ‘@company/common’;

Con mi actual configuración, recibo una advertencia de eslint en mi IDE (VS Code) cada vez que abro cualquier archivo que importa algo de @company/common:
‘@company/common’ debería ser listado en las dependencias del proyecto. Ejecute ‘npm i -S @company/common’ para agregarlo.

Preferiría no deshabilitar completamente esta advertencia si es posible. ¿Hay alguna forma de configurar eslint para que comprenda los monorepos y no me dé una advertencia cuando intento importar algo de un paquete (espacio de trabajo) dentro de mi monorepo?

davy.ai

July 20, 2023 at 5:11 am

Sí, puedes configurar eslint para que entienda la estructura de tu monorepo y elimine la advertencia al importar algo de un paquete dentro de tu monorepo.

Una forma de lograr esto es utilizando el paquete eslint-import-resolver-typescript junto con algunos cambios en la configuración. Primero, instala el paquete eslint-import-resolver-typescript:

npm install --save-dev eslint-import-resolver-typescript

Luego, en tu archivo .eslintrc.json, agrega la siguiente configuración:

"settings": {
  "import/resolver": {
    "typescript": {}
  }
}

Esto le indica a eslint que use el resolutor eslint-import-resolver-typescript al resolver las importaciones. El resolutor buscará módulos en tu monorepo en función de las rutas y extensiones de archivo especificadas en tus archivos tsconfig.json.

Finalmente, en tu IDE (VS Code), agrega la siguiente configuración a la configuración de tu espacio de trabajo:

"typescript.tsdk": "node_modules/typescript/lib"

Esto le indica a VS Code que use la versión de TypeScript instalada en tu directorio node_modules en lugar de la versión incorporada. Esto es necesario para resolver correctamente las importaciones en tu monorepo.

Con estos cambios, eslint debería poder resolver correctamente las importaciones dentro de tu monorepo y eliminar la advertencia al importar de un paquete/espacio de trabajo dentro de él.

Answer

davy.ai

July 20, 2023 at 5:11 am
Sí, puedes configurar eslint para que entienda la estructura de tu monorepo y elimine la advertencia al importar algo de un paquete dentro de tu monorepo.

Una forma de lograr esto es utilizando el paquete eslint-import-resolver-typescript junto con algunos cambios en la configuración. Primero, instala el paquete eslint-import-resolver-typescript:

npm install --save-dev eslint-import-resolver-typescript

Luego, en tu archivo .eslintrc.json, agrega la siguiente configuración:
```
"settings": {
  "import/resolver": {
    "typescript": {}
  }
}
```
Esto le indica a eslint que use el resolutor eslint-import-resolver-typescript al resolver las importaciones. El resolutor buscará módulos en tu monorepo en función de las rutas y extensiones de archivo especificadas en tus archivos tsconfig.json.

Finalmente, en tu IDE (VS Code), agrega la siguiente configuración a la configuración de tu espacio de trabajo:
```
"typescript.tsdk": "node_modules/typescript/lib"
```
Esto le indica a VS Code que use la versión de TypeScript instalada en tu directorio node_modules en lugar de la versión incorporada. Esto es necesario para resolver correctamente las importaciones en tu monorepo.

Con estos cambios, eslint debería poder resolver correctamente las importaciones dentro de tu monorepo y eliminar la advertencia al importar de un paquete/espacio de trabajo dentro de él.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Error de “no-extraneous-dependencies” de Eslint con npm workspaces.

Answer

davy.ai