如何修复 Eslint 错误：在我的 React Typescript 项目中，“默认”被限制用作导出名称

Question

我正在更新我的 React 项目中的 eslint 规则。

目前我在eslintrc.js的extend属性中有这个：

 extends: [ 'airbnb', 'airbnb-typescript', 'airbnb/hooks', // "plugin:@typescript-eslint/recommended", // "plugin:@typescript-eslint/recommended-requiring-type-checking", // "plugin:eslint-comments/recommended", 'plugin:react/recommended', 'plugin:jest/recommended', 'plugin:prettier/recommended', ],

我收到此错误：

错误“默认”被限制用作导出名称 no-restricted-exports

我们的组件模式是这样的：

 Button/ - Button.tsx - Button.spec.ts - Button.stories.tsx - index.ts

索引.ts：

从'./Button'导出{默认}；

如何解决这个问题？ 还是我必须以某种方式覆盖这个 eslint 规则？

Answer 1

您需要禁用此规则 - no-restricted-exports 。 你的.eslintrc 文件看起来像这样

{ "extends": [ 'airbnb', 'airbnb-typescript', 'airbnb/hooks', // "plugin:@typescript-eslint/recommended", // "plugin:@typescript-eslint/recommended-requiring-type-checking", // "plugin:eslint-comments/recommended", 'plugin:react/recommended', 'plugin:jest/recommended', 'plugin:prettier/recommended', ], "rules": { "no-restricted-exports": 0, } }

更多文档在这里 - https://eslint.org/docs/latest/rules/no-restricted-exports 。

另一种选择是不使用默认导出，而是执行以下操作：

 export const Button = () => {...};

在 index.ts 文件中：

 export * from './Button';