背景
ESLint 是一个广泛接受的 JavaScript 代码质量检查工具。它可在代码编写期间自动检测代码中的问题。而 WebStorm 是一款功能强大的 IDE 编辑器，其集成了 ESLint 插件，可以帮助我们更方便地使用 ESLint。但在实际开发过程中，我们可能会遇到编辑器与 ESLint 的配置误差问题，导致无法正常使用 ESLint 的功能。
剖析问题
首先，我们需要了解 ESLint 的配置文件 .eslintrc。通常它可以是 .eslintrc.js、.eslintrc.yaml 或 .eslintrc.json 等格式。这个配置文件定义了一些规则、插件和配置项，它由 ESlint 读取来进行代码分析。在 WebStorm 中，我们配置 ESLint 的方式是在 File -> Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint 中启用插件，并在 Rules 中选择使用 Project 的 ESLint 配置文件。如果我们的 ESLint 配置文件与 WebStorm 中的配置不一致，就会出现上述问题。
解决问题
为了解决这个问题，我们可以采取以下措施：
1. 查看不同的配置文件之间有哪些不同之处
首先我们需要查看不同的配置文件之间有哪些不同之处，理解其中的规则、插件和配置项。
示例：.eslintrc.js
-- -------------------- ---- -------
-------------- - -
---- -
----- ----
--
-------- -
---------------------
-----------------------------
--
-------------- -
------------ --
--
------ -
----- --------- ---------
-
-示例：WebStorm 中的配置
-- -------------------- ---- -------
-
---------- -------------
---------- ---------------------- -------------------------------
-------- -
------- --------- ---------
--
------ -
------- ----
--
---------------- -
-------------- --
-
-2. 确定需要修改的规则
通过比较不同的配置文件，我们可以确定需修改的规则。在上面的示例中，可以看到规则 semi 不一致。
3. 修改 WebStorm 中的配置文件
根据需要修改规则，然后修改 WebStorm 中的配置文件。
示例：
-- -------------------- ---- -------
-
---------- -------------
---------- -
---------------------
-----------------------------
--
-------- -
------- --------- --------
--
------ -
------- ----
--
---------------- -
-------------- --
-
-4. 重新启动 WebStorm
修改完成后，我们需要重新启动 WebStorm，才能让修改生效。
总结
在使用 ESLint 和 WebStorm 的过程中，无论我们使用了哪种格式的 ESLint 配置文件，我们务必要保证在 WebStorm 中的配置和实际代码中的 ESLint 配置文件保持一致，否则就会出现配置误差问题。通过查看不同的配置文件之间有哪些不同之处，并逐一对比需要修改的规则，修改 WebStorm 中的配置文件，我们可以很好地解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6500212795b1f8cacde540e5