當我在nextjs上使用babel別名時出現Eslint錯誤

Question

我將module-resolver插件添加到.babelrc中 ，以便能夠在nextjs項目中使用別名。

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

一切正常，但是自從我添加了此配置以來，我的eslint配置會生成導入/未解決的錯誤。

[eslint]無法解析模塊'components / HOC'的路徑。 [導入/無未解決]

為了解決這個問題，我嘗試更新.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"]
    }
  }
}