在前端开发中，代码规范是非常重要的。为了保证团队代码风格的一致性，我们通常会使用 ESLint 工具来检查代码是否符合规范。
但是，在实际项目中，我们往往需要引入多个第三方库和模块，这些模块的代码风格可能和我们自己的不同。如果每个模块都要单独配置一遍 ESLint 规则，那么就会增加很多工作量和复杂度。为了解决这个问题，我们可以使用 eslint-config-import 这个 npm 包。
背景
在使用 ESLint 检查代码时，我们需要指定一个配置文件，告诉它应该按照哪些规则来检查代码。通常情况下，我们会选择使用一个现成的规则集（如 Airbnb JavaScript Style Guide），或者自己定义一些规则。
当我们引入第三方模块时，为了避免与它的代码风格产生冲突，我们还需要为这些模块单独指定一套规则。而这些规则往往是和我们自己的规则有所不同的。
为了简化这个过程，eslint-config-import 将引入的模块和我们自己的代码分别进行了配置，从而使得我们在使用 ESLint 时更加方便。
安装和使用
安装
要使用 eslint-config-import，首先需要安装它。在终端中执行以下命令即可：
npm install --save-dev eslint-config-import
配置
安装完成后，我们需要在 .eslintrc 文件中进行配置。假设我们的项目使用了 React 和 ES6，可以按照以下方式配置：
-- -------------------- ---- ------- - ---------- - --------------------- ----------------------- ------------------------- -------------------------- -- ---------------- - -------------- ----- ------------- --------- --------------- - ------ ---- - -- ---------- - --------- ------- -- -------- - -- ---------- - -展开代码
在这个配置文件中，我们引入了 eslint:recommended、plugin:import/errors、plugin:import/warnings、plugin:react/recommended 四个规则集，分别对应 ESLint 默认的规则、eslint-plugin-import 插件提供的规则、React 相关的规则等。
注意，在上面的配置中，并没有直接引入 eslint-config-import 规则集。原因是，我们可以通过继承已有规则集的方式来实现同样的效果。具体地，只需要将 plugin:import/errors 和 plugin:import/warnings 插件的使用方式修改一下：
-- -------------------- ---- ------- - ---------- - --------------------- -------------------------- -- ---------------- - -------------- ----- ------------- --------- --------------- - ------ ---- - -- ---------- - --------- ------- -- -------- - ----------------------- -------- --------------- -------- ------------------- -------- ----------------- -------- ---------------- ------- - -展开代码
在这里，我们手动引入了 eslint-plugin-import 提供的五个规则，并将它们作为自定义规则添加到了 .eslintrc 文件中。
示例
为了更好地理解以上内容，我们来看一个具体的示例。假设我们有以下两个文件：
// app.js > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/47148) ，转载请注明来源 [https://www.javascriptcn.com/post/47148](https://www.javascriptcn.com/post/47148)
