如何修復 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';