如何配置 ESLint 使其禁止默认导出

Question

I've been searching the web and StackOverflow for this for quite some time with no success.

What I'm trying to do have ESLint mark the following as errors:

export default ...;

with default being the key here. So far the best I've got is a reference to eslint-plugin-import plugin and some of its rules that can make me closer to the target, namely the no-anonymous-default-export rule. But even with this rule the following default exports would be valid:

const foo = 123
export default foo

export default class MyClass() {}

export default function foo() {}

How can I configure ESLint in such a way that these four would also be considered errors?

Answer 1

You can do this with the no-restricted-syntax rule . Try pasting this in the demo to try it out (you'll need to change "Source Type" to "module" first in the options):

/* 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

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

Answer 3

As it's already answered in accepted answer, worth mentioning when working in Next.js projects, I like to do:

'import/no-default-export': 'error',
overrides: [
  {
    files: ['src/pages/**/*'],
    rules: {
      'import/no-default-export': 'off',
    },
  },
],

Where the only exception is routed pages, which must be default exported in Next.js.