如何使用 Eslint 在 Gatsby 中使用绝对导入？

Posted 2023-02-19

【中文标题】如何使用 Eslint 在 Gatsby 中使用绝对导入？

【英文标题】：How to use absolute imports in Gatsby with Eslint?

【发布时间】：2020-08-12 12:59:59

【问题描述】：

我在 Gatbsy 中使用 gatsby-plugin-root-import 包来使用绝对导入。绝对导入有效，但 Eslint 抛出错误“import/no-unresolved”。 我尝试使用此代码：

module.exports = 
  ...   
  "settings": 
    "import/resolver": 
      "node": 
        "paths": ["src"]
      
    ,
  ,

但它不起作用。这个问题有解决办法吗？

gatsby-plugin-root-import 配置：

      resolve: "gatsby-plugin-root-import",
      options: 
        src: path.join(__dirname, "src"),
        pages: path.join(__dirname, "src/pages"),
        component: path.join(__dirname, "src/component"),
        images: path.join(__dirname, "src/assets/images"),
        fonts: path.join(__dirname, "src/assets/fonts"),
        styles: path.join(__dirname, "src/styles"),
      

【问题讨论】：

你能不能也展示一下你是如何配置gatsby-plugin-root-import 的

@ShubhamKhatri 我编辑了这篇文章。在每个选项场景中我都会出错。

【参考方案1】：

您可以将eslint-import-resolver-alias 插件安装为开发依赖项，例如

npm install -D eslint-import-resolver-alias

然后编辑您的 eslint 配置以指定别名

module.exports = 
  ...   
  "settings": 
    "import/resolver": 
      "alias": 
        "map": [
            ["src", "./src"],
            ["pages", "./src/pages"],
            ["component", "./src/component"],
            ["images", "./src/images"],
            ["fonts", "./src/fonts"],
            ["styles", "./src/styles"],
         ],
         "extensions": [".js", ".jsx"]
      
    ,
  ,

基本上你也需要将所有别名作为映射提供给 eslint