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

Question

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

目前，我在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',
],

我得到这个错误：

错误"default"被限制用作导出名称无限制出口

我们的组件模式如下：

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

index.ts:

从"导出｛default｝/按钮'；

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

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';