Búsqueda de sitios web

eslint se queja del aliasing de rutas de TypeScript

He configurado alias de rutas en el .tsconfig de TypeScript para que mis importaciones se vean más limpias.

En mi código, cuando intento importar mi interfaz así

import { ApiResponse } from '@api';

eslint se queja: No se puede resolver la ruta al módulo '@api' Sin embargo, intelisense en vscode parece estar bien. Es capaz de ofrecer predicción de código y "Ir a la declaración", lo cual es una pista de que mi .tsconfig está configurado correctamente, pero eslint de alguna manera está mal configurado.

Archivos relevantes

En mi tsconfig.json, he configurado alias de ruta de la siguiente manera:

{
  "compilerOptions": {
    "moduleResolution": "node",               
    "baseUrl": "./src",                     
    "paths": {                              
      "@api": ["./types/api"]
    },
  }
}

Mi ./src/types/api.ts se ve así:

// 3rd party API response object
export interface ApiResponse {
  ....
}

Finalmente, mi .eslintrc.json se ve así:

{
  "env": {
    "node": true
  },
  "globals": {
    "console": true
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "parser": "@typescript-eslint/parser",
  "settings": {
    "import/extensions": [".js", ".ts"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".ts"]
      }
    }
  }
}

¿Alguna idea de lo que podría estar haciendo mal?

Respuesta #1

Para soportar el baseUrl y paths de tsconfig, necesitas el paquete eslint-import-resolver-typescript.

  1. Asegúrate de tener lo básico:
install the basics
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

support tsconfig baseUrl and paths
npm i -D eslint-plugin-import eslint-import-resolver-typescript
  1. Luego, en el eslintrc, aquí en json:
{
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "./"
  },
  "plugins": [
    "@typescript-eslint",
    "import"
  ],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ]
}

Respuesta #2

Tuve este problema, y fue más complicado ya que estoy usando una estructura de monorepo. Lo resolví usando eslint-import-resolver-typescript.

Como se explica en el doc, dentro de tu configuración de eslint, agregas esta configuración apuntando a todos tus proyectos.

// inside .eslintrc

"settings": {
  "import/resolver": {
    "typescript": {
      // use an array
      "project": [
        "packages/module-a/tsconfig.json",
        "packages/module-b/tsconfig.json"
      ],
    }
  }
}

Artículos relacionados