eslintがjsconfigにマップされたパスを解決する方法

私のnextjsプロジェクトでは、jsconfig.json絶対インポートを簡単にするためにパスをマッピングしました

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

インポートパスは次のようになります import { VIEW } from '@/src/shared/constants';

私のeslintrc.js設定は

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

「@ / what / ever / my / path / is」を解決できないというエラーが引き続き表示される

eslintにjsconfigパスを認識させる方法

私はeslintrcのパーサーとしてbabel-eslintを使用していました。検索中にbabel-plugin-module-resolver、モジュールを解決するためにbabelrcを追加する必要があることに気付きました。このファイルでは、jsconfigにあるマップされたパスを定義できます。

したがって、次のプラグインをbabelrcファイルに追加すると、コードが正常にコンパイルされます。

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

よるeslintインポート・リゾルバ・エイリアスのドキュメント、mapプロパティがので、これを試して、配列の配列であるべきです。

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

また、実際にeslint-import-resolver-aliasインストールしたことを再確認してください-忘れがちです！