So lassen Sie eslint-Auflösungspfade in jsconfig zuordnen

In meinem nextjs-Projekt habe ich einen Pfad zugeordnet jsconfig.json, um einfache absolute Importe zu ermöglichen

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"]
    },
    "target": "es6",
    "module": "commonjs",
    "experimentalDecorators": true
  }
}

Meine Importpfade sehen so aus import { VIEW } from '@/src/shared/constants';

Mein eslintrc.jshat Einstellungen angegeben als

module.exports = {
    ... ,
    settings: {
        "import/resolver": {
          alias: {
            extensions: [".js"],
            map: ["@", "."]
          }
        }
      }
}

Ich erhalte immer noch die Fehlermeldung, dass "@ / what / ever / my / path / is" nicht behoben werden kann.

Wie kann ich eslint den Pfad jsconfig erkennen lassen?

Ich habe babel-eslint als Parser in eslintrc verwendet. Während der Suche wurde mir klar, dass ich babel-plugin-module-resolverbabelrc hinzufügen muss, um die Module aufzulösen. In dieser Datei können wir unsere zugeordneten Pfade definieren, die sich in unserer jsconfig befinden.

Daher hat das Hinzufügen des folgenden Plugins in die babelrc-Datei meinen Code erfolgreich kompiliert.

[
    "module-resolver",
    {
        "alias": {
          "@": "./"
        }
    }
]

Gemäß den Dokumenten für eslint-import-resolver-alias sollte die mapEigenschaft ein Array von Arrays sein. Versuchen Sie Folgendes :

module.exports = {
    ... ,
    settings: {
        "import/resolver": {
          alias: {
            extensions: [".js"],
            map: [ ["@", "."] ]
          }
        }
      }
}

Überprüfen Sie außerdem, ob Sie tatsächlich eslint-import-resolver-aliasinstalliert haben - es ist leicht zu vergessen!