ESLint首选默认导出导入/首选默认导出

Question

嗨，我很努力地了解/我的React Project消失了这个错误。

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,
     ...
}

我是否需要在函数中添加“默认”？ export default function getItems() {...}

谢谢

Answer 1

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

这个词off必须被引用。

Answer 2

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

使用 0 导入/首选默认导出问题

Answer 3

要关闭此警告，您可以添加评论

/* 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 './myFunction';

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

...或者你可以称呼其他

// someOtherFile.js

import someDifferentName from './myFunction';

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

export default当您仅从文件中导出一点代码时，通常最好使用此方法。每个文件只能有一个默认导出。关于它是否有助于进行树状握手，存在一些争论，但这并不重要。实际上，将代码导入另一个文件时，这只是一种更好的语法。

利用export自身

如果您要从文件中导出多个代码（或计划在将来导出），请使用export。有时将其称为“命名导出”，因为导入时必须使用相同的名称。例如：

// myFile.js

function myFunction() {
    // do something
}

function anotherFunction() {
    // do something
}

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

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

// someOtherFile.js

import { myFunction } from './myFunction';

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

您可以导入多个内容：

// someOtherFile.js

import { myFunction, anotherFunction } from './myFunction';

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

有时在导入时可能需要使用其他名称。如果您有两个具有两个名称的导出文件（来自两个不同的文件），则可能会发生这种情况。在这种情况下，可以为命名的导出使用别名：

// someOtherFile.js

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

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