如何配置 ESLint 以禁止默认导出

Question

我一直在网上和 StackOverflow 上搜索这个，但没有成功。

我正在尝试让 ESLint 将以下内容标记为错误：

export default ...;

同default是这里的关键。到目前为止，我得到的最好的是对eslint-plugin-import插件及其一些规则的引用，这些规则可以让我更接近目标，即无匿名默认导出规则。但即使使用此规则，以下默认导出也是有效的：

const foo = 123
export default foo

export default class MyClass() {}

export default function foo() {}

如何配置 ESLint 使这四个也被视为错误？

Answer 1

您可以使用no-restricted-syntax规则来做到这一点。尝试将其粘贴到演示中进行试用（您需要先在选项中将“源类型”更改为“模块”）：

/* eslint "no-restricted-syntax": ["error", {
    "selector": "ExportDefaultDeclaration",
    "message": "Prefer named exports"
  }] */
export default class Foo { } // 5:1 - Prefer named exports (no-restricted-syntax)

Answer 2

因为它已经在接受的答案中得到了回答，所以在 Next.js 项目中工作时值得一提，我喜欢这样做：

'import/no-default-export': 'error',
overrides: [
  // Pages router
  {
    files: ['src/pages/**/*'],
    rules: {
      'import/no-default-export': 'off',
    },
  },
  // App router
  {
    files: ['src/app/**/{page,layout,not-found}.tsx'],
    rules: {
      'import/no-default-export': 'off',
    },
  },
],

唯一的例外是路由页面，它必须在 Next.js 中默认导出。

Answer 3

如果您已经在使用eslint-plugin-import，则可以使用该no-default-export规则（于 2018 年 2 月左右添加）。