如何为NextJS中启用的ESLint import/no-named-export规则添加例外

当然可以为Next.js专属的合法命名导出（如getServerSideProps）添加例外，只需在pages/和app/目录的.eslintrc配置中，给import/no-named-export规则设置allow选项即可。

具体配置步骤： #

1. 根目录.eslintrc保持原有配置：

{
  "rules": {
    "import/prefer-default-export": "error",
    "import/no-named-export": "off"
  }
}

2. pages/和app/目录的.eslintrc修改规则：
   在这两个目录的ESLint配置中，开启默认导出要求，并为import/no-named-export规则指定允许的Next.js特殊命名导出：

{
  "rules": {
    "import/prefer-default-export": "error",
    "import/no-named-export": ["error", {
      "allow": [
        "getServerSideProps",
        "getStaticProps",
        "getStaticPaths",
        "generateMetadata",
        "generateStaticParams"
      ]
    }]
  }
}

说明： #

• allow数组中可以添加所有Next.js官方认可的页面专属命名导出，比如：
  • pages/目录常用的getServerSideProps（服务端渲染）、getStaticProps（静态生成）、getStaticPaths（动态路由静态生成）
  • app/目录常用的generateMetadata（生成元数据）、generateStaticParams（生成动态路由参数）
• 这样配置后，ESLint会允许这些合法的命名导出，同时阻止其他非必要的命名导出，符合你的规则需求。

内容的提问来源于stack exchange，提问作者Jared