ESLint 是一个广泛使用的 JavaScript 代码检查工具，可以帮助我们提高代码质量和可维护性。而 eslint-plugin-import 是 ESLint 的一个插件，它提供了一些规则，可以检查 import/export 语句的使用是否符合规范。本文将介绍如何使用 eslint-plugin-import 插件，并且详细说明其中的各个规则以及它们的使用方法。
安装
首先，我们需要安装 eslint-plugin-import 插件：
npm install eslint-plugin-import --save-dev
然后，在 .eslintrc 配置文件中添加插件：
{
"plugins": [
"import"
]
}这样，我们就可以开始使用 eslint-plugin-import 插件了。
规则
eslint-plugin-import 插件提供了很多规则，这里只介绍一些常用的规则。
import/no-unresolved
这个规则用来检查 import/export 的模块是否存在，如果不存在则报错。这个规则非常有用，可以避免一些潜在的错误。
例如，我们有一个文件叫做 utils.js，它包含了一些常用的工具函数。我们在另一个文件中使用了这些工具函数：
import { trim } from './utils';如果我们把 utils.js 文件移动到了其他目录，那么上面的代码就会报错。使用 import/no-unresolved 规则可以避免这种问题。
这个规则有一个选项 ignore，可以用来忽略一些模块。例如，我们有一个模块叫做 config，它是在运行时动态加载的，我们可以这样配置：
{
"rules": {
"import/no-unresolved": [
"error",
{ "ignore": ["^config$"] }
]
}
}import/named
这个规则用来检查 import/export 语句是否使用了正确的命名方式。具体来说，它要求 import/export 语句中使用的名称必须与模块导出的名称相同。
例如，我们有一个模块叫做 utils，它导出了一个名为 trim 的函数：
export function trim(str) {
return str.trim();
}我们在另一个文件中使用了这个函数：
import { trim } from './utils';这个 import 语句就符合了 import/named 规则。
如果我们使用了错误的名称，例如：
import { trim2 } from './utils';这个 import 语句就会报错。
import/default
这个规则用来检查 import/export 语句是否使用了正确的默认导出方式。具体来说，它要求 import/export 语句中使用的名称必须与模块的默认导出名称相同。
例如，我们有一个模块叫做 utils，它导出了一个默认的函数：
export default function trim(str) {
return str.trim();
}我们在另一个文件中使用了这个函数：
import trim from './utils';
这个 import 语句就符合了 import/default 规则。
如果我们使用了错误的名称，例如：
import trim2 from './utils';
这个 import 语句就会报错。
import/no-named-as-default
这个规则用来检查 import/export 语句是否正确使用了默认导出。具体来说，它要求 import/export 语句中不能使用非默认导出名称来引用默认导出。
例如，我们有一个模块叫做 utils，它导出了一个默认的函数和一个名为 trim 的函数：
export default function trim(str) {
return str.trim();
}
export function foo() {
// ...
}我们在另一个文件中使用了这个模块的默认导出：
import utils from './utils';
这个 import 语句就符合了 import/no-named-as-default 规则。
如果我们使用了错误的名称，例如：
import { trim } from './utils';这个 import 语句就会报错。
import/no-named-as-default-member
这个规则用来检查 import/export 语句是否正确使用了默认导出。具体来说，它要求 import/export 语句中不能使用非默认导出名称来引用默认导出。
例如，我们有一个模块叫做 utils，它导出了一个默认的函数和一个名为 trim 的函数：
export default function trim(str) {
return str.trim();
}
export function foo() {
// ...
}我们在另一个文件中使用了这个模块的默认导出：
import utils from './utils';
这个 import 语句就符合了 import/no-named-as-default-member 规则。
如果我们使用了错误的名称，例如：
import utils, { trim } from './utils';这个 import 语句就会报错。
结语
通过本文的介绍，我们学习了 eslint-plugin-import 插件的使用方法和一些常用的规则。这些规则可以帮助我们写出更加规范和易于维护的代码。当然，这些规则并不是一成不变的，我们可以根据项目的实际情况来选择适合自己的规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6796f1cc504e4ea9bddec69c