ESLint 首选默认导出 import/prefer-default-export

Question

你好，我正在努力理解并解决与我的React项目相关的eslint错误。

Prefer default export import/prefer-default-export

Helpers.js的错误指向：

export function getItems() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}

函数导入：

import { getItems } from '../helpers/helpers';

componentDidMount() {
    getItems.call(this);
}

我已经尝试过但无效：

"rules": {
     "import/prefer-default-export": off,
     ...
}

我需要在函数中添加"default"吗？export default function getItems() {...}

谢谢

- roshambo

---

建议每个模块至少使用 export default 导出一个函数，无论该模块是导出一个还是多个函数。关于你的问题，是的，你需要使用 export default 来解决 EsLint 警告。 - Hemadri Dasari

在规则中，你尝试过 "import/prefer-default-export": 0 吗？ - its30

在我的配置中，我使用了："import/prefer-default-export": false，它完美地运行。 - fllprbt

Answer 1

"rules": {
     "import/prefer-default-export": "off",
     ...
}

单词off必须用引号引起来。

- SET001

Answer 2

为了关闭此警告，您可以添加注释。

/* eslint-disable import/prefer-default-export */

将代码导出的getItems函数移动到文件顶部。

值得注意的是，ESLint在此处仅提供了样式警告 - 您的代码没有任何“错误”，特别是如果您打算从同一文件中将更多函数导出。

背景：

如果有用的话，这里是 export default 和 export 之间的区别：

使用 export default：

在此示例中，文件 myFile.js 仅导出一个代码部分；名为 myFunction 的函数。

// myFile.js

function myFunction() {
    // do something
}

export default myFunction;

当你导入一个被标记为export default的内容时，你可以随意命名。因此，你可以像这样使用相同的名称：

// someOtherFile.js

import myFunction from './myFile';

// ... now you can use myFunction by calling myFunction()

......或者您可以称其为其他名称

// someOtherFile.js

import someDifferentName from './myFile';

// ... now you can use myFunction by calling someDifferentName()

每个文件只能有一个“默认”导出项。当您仅从文件中导出一小段代码时，通常最好使用export default。关于它是否有助于树摇优化存在一些争议，但这并不重要。实际上，在您将代码导入另一个文件时，这只是一种更好的语法。

仅使用export

如果您希望从文件中导出多个代码块（或计划在将来这样做），则应该仅使用export。这有时被称为“命名导出”，因为您必须在导入时使用相同的名称。例如：

// myFile.js

function myFunction() {
    // do something
}

const someVariable = "Hello World"

export { 
    myFunction, 
    someVariable,
    // plus as many others as you like
    };

现在，当您导入命名导出时，您必须使用相同的名称，并使用解构语法：

// someOtherFile.js

import { myFunction } from './myFile';

// ... now you can use myFunction by calling myFunction()

您可以导入多个东西：

// someOtherFile.js

import { myFunction, someVariable } from './myFile';

// ... now you can use myFunction by calling myFunction()
// ... now you can use someVariable as someVariable

有时您可能需要在导入时使用不同的名称。如果您有两个命名导出项（来自两个不同的文件），具有相同的名称，则可以为命名导出项使用别名：

// someOtherFile.js

import { myFunction as someDifferentName } from './myFile';

// ... now you can use myFunction by calling someDifferentName()

- Jordan Rolph

---

这个规则很奇怪，为什么你要关心我想要如何导出。我从没觉得这个设置有用过。 - windmaomao

@windmaomao 是的，我同意。我想这只是在试图强制保持一致性。 - Jordan Rolph

Answer 3

"rules": {
     "import/prefer-default-export": 0,
     ...
}

使用0来导入/偏好默认导出会有问题

- Mujahid Abbas