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

Question

嗨，我正在努力理解/让这个eslint错误在我的React项目中消失。

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() {...}

谢谢

Answer 1

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

off这个词必须加引号。

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 './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
}

const someVariable = "Hello World"

export { 
    myFunction, 
    someVariable,
    // 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, someVariable } from './myFunction';

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

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

// someOtherFile.js

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

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

Answer 3

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

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