如何让eslint解析jsconfig中映射的路径

Question

在我的 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路径

Answer 1

我在 eslintrc 中使用 babel-eslint 作为解析器。在搜索时，我意识到我需要添加babel-plugin-module-resolverbabelrc 来解析模块。在这个文件中，我们可以定义我们的 jsconfig 中的映射路径。

因此在 babelrc 文件中添加以下插件成功编译了我的代码。

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