javascript - 当我在 nextjs 上使用 babel 别名时出现 Eslint 错误

Question

我将 module-resolver 插件添加到 .babelrc 中，以便能够在我的 nextjs 项目中使用别名。

"plugins": [
    [
        "module-resolver",
        {
             "root": [
             "./"
             ],
             "alias": {
                "components": "./app/components",
                "pages": "./app/pages",
                "themes": "./app/themes"
             }
        }
    ]
]

一切正常，但自从我添加此配置后，我的 eslint 配置生成导入/无 Unresolved 错误。

[eslint] Unable to resolve path to module 'components/HOC'. [import/no-unresolved]

为了解决这个问题，我尝试更新我的 .eslintrc.json 设置，如下所示:

"settings": {
    "import/resolver": {
      "components": "./app/components",
      "pages": "./app/pages",
      "themes": "./app/themes"
    }  
},

但是，这个新配置没有任何作用。我想正确解决这个问题，您有正确解决该问题的想法吗？

谢谢!

Answer 1

在 jsconfig.json 上添加此设置(对于 TypeScript，为 tsconfig.json) 引用: https://github.com/tleunen/babel-plugin-module-resolver#editors-autocompletion

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components": ["./app/components"],
      "pages": ["./app/pages"],
      "themes": ["./app/themes"]
    }
  }
}