React TypeScript项目如何修复ESLint default导出名受限报错

这个报错来自Airbnb ESLint规则集默认启用的no-restricted-exports规则，规则默认将default列为受限导出名，刚好和你项目中组件目录用index.ts做统一出口、重导出组件默认导出的写法冲突。

你可以根据团队规范要求二选一，优先推荐第一种，适配你们现有统一目录结构，改造成本最低。

方案1：覆盖ESLint规则（推荐） #

直接在eslintrc.js的rules字段中调整no-restricted-exports规则配置，放行export { default } from 'xxx'这类重导出写法，不需要改动任何业务代码：

// eslintrc.js
module.exports = {
  extends: [
    // 原有extends配置保持不变即可
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    // 其他已有规则配置...
    'no-restricted-exports': ['error', {
      restrictedNamedExports: ['default'],
      restrictDefaultExports: {
        named: false, // 核心配置：允许 { default } 形式的命名重导出
        direct: false,
        defaultFrom: false,
        namedFrom: false,
        namespaceFrom: false
      }
    }]
  }
}

如果项目使用的是较早版本的Airbnb规则集，不支持restrictDefaultExports配置项，可以用兼容写法覆盖规则，把default从受限导出名单里移除：

rules: {
  'no-restricted-exports': ['error', {
    restrictedNamedExports: ['then', 'catch'] // 保留原规则对Promise相关关键字的限制，移除default
  }]
}

方案2：调整导出代码写法（不推荐） #

如果团队要求严格遵守Airbnb默认规则不做修改，可以调整每个组件index.ts的导出写法，绕开规则限制，但需要改动所有存量组件的出口文件，改造成本较高：

// 组件目录下的index.ts
import Button from './Button';

export default Button;
// 若需要同时支持命名导入，可以补充导出
// export { Button };

调整后就不会触发no-restricted-exports报错，但和之前的一行导出写法效果完全一致，没有实际功能差异。

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