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

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

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

/* 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。有一些关于它有助于 treeshaking 的争论，但这并不重要。实际上，当您将代码导入另一个文件时，它只是一种更好的语法。

单独使用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()

Answer 2

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

单词off必须加引号。

Answer 3

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

使用 0 解决 import/prefer-default-export 问题

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

ESLint Prefer default export import/prefer-default-export

reactjs

eslintrc