在现代的前端项目中，我们通常会使用各种工具辅助我们开发和维护代码。其中，ESLint 是一个代码质量检查工具，能够帮助我们发现代码中的一些常见问题和潜在的 Bug，从而提高代码的可读性、可维护性和可靠性。而 lint-staged 则是一个 Git 钩子，能够在 Git 提交之前对本次提交的文件进行预校验和格式化，避免一些低级错误和不必要的冲突。
但是，问题来了：如何配置 ESLint 和 lint-staged，让它们能够协同工作，同时保证代码质量和开发效率呢？在本文中，我们将带着这个问题来一步步解决它。
为什么需要配置彼此之间的关联？
首先，让我们来思考一下为什么需要配置 ESLint 和 lint-staged 之间的关联。
在普通的 ESLint 配置中，我们通常可以选择配置一些规则和插件，如：airbnb、prettier、typescript 等。这些配置项常常是全局的，作用于整个项目，而不是特定的文件和提交。这意味着，一旦开启 ESLint 检查，所有的文件都会被逐个检查，包括那些并没有更改的文件。
但是在实际项目中，我们通常只需要对本次提交的文件进行检查，而不是全部文件。这样能够避免一些不必要的时间浪费和冲突。
这时候，就需要借助 lint-staged 工具实现自动化检查。但是，由于 lint-staged 是在 Git 钩子中调用各种工具（如 ESLint、prettier、stylelint 等），而 ESLint 又是一个全局的配置工具，这就需要我们针对它们两者之间的关系进行一些特殊的配置和调整，才能让它们可以无缝配合起来。
如何配置 ESLint + lint-staged？
接下来，让我们来详细介绍一下如何准确地配置 ESLint + lint-staged。
1. 安装相关工具和依赖
首先，我们需要安装 ESLint 和 lint-staged，并正确配置它们的依赖项。
- -- ------ ---- --- - -- ------ ------------------- -------------------- ---------------------- ------------------ - -- ----------- ----- --- - -- ----------- ----- ---------------------- --------
在此基础上，我们还需要正确配置 lint-staged 的运行命令和相关参数：
-- ------------
-
-------- -
-------- -
------------- -------------
-
--
-------------- -
---------- -
------- -------
---- ----
-
-
-这个配置意味着，在 Git 提交之前，lint-staged 会自动执行 eslint --fix 命令对代码文件进行修复，并将修复的结果添加到该次 Git 提交中。同时，我们还需要在 eslintConfig 中添加 eslint-config-prettier 配置，避免与 prettier 规则冲突：
-- ------------
-
--------------- -
---------- -
---------
----------
--
---------- -
-------
--
-------- -
------------------------------- -
--------
-
------------- -
------
------
-
-
-
-
-
-2. 配置 ESLint 开启 Git 钩子
在 ESLint 中，我们需要在 .eslintrc.* 文件中开启 Git 钩子（因为 Git 钩子是以项目的目录为基础的，而不是各个文件的基础）：
-- --------------
-
------ -
---------- -----
------ -----
------- ----
--
---------- -
---------
----------
--
--------- ---------------
---------------- -
--------------- -
------ ----
--
-------------- -----
------------- --------
--
---------- -
-------
--
-------- -
------------------------------- -
--------
-
------------- -
------
------
-
-
-
--
------------ -
-
-------- -
----------------------------
------------------------------------
--
------ -
------- ----
-
--
-
-------- ---------
-------- -
------------- -
-------
-
-------- -------- --------
-
-
-
-
--
------- ----
-这可以让 ESLint 知道在 Git 钩子中应该怎样去检查和处理代码文件。
3. 配置 lint-staged 钩子
最后，在 lint-staged 配置中，我们需要通过 --ignore-staged 参数告诉 ESLint 忽略已经被 git add 的文件（即上面配置中的 "git add" 命令）：
-- ------------
-
-------------- -
---------- -
------- -------
---- --- ----------------
-
-
-这样就可以让 ESLint 和 lint-staged 相互协作，实现代码检查和自动修复的效果了。
总结
通过上述的配置操作，我们可以大大提高代码质量和开发效率，避免低级错误和冲突，并最终提高整个项目的可靠性和可维护性。在实际的项目中，一定要充分发挥 ESLint 和 lint-staged 的优势和功能，结合自己的实际情况进行调整和完善，才能更好地发挥它们的价值和意义。
附上最终的示例配置代码供参考：
-- ------------
-
-------- -
-------- -
------------- -------------
-
--
--------------- -
---------- -
---------
----------
--
---------- -
-------
--
-------- -
------------------------------- -
--------
-
------------- -
------
------
-
-
-
-
--
-------------- -
---------- -
------- ----- -----------------
---- --- ----------------
-
--
------------------ -
--------- ----------
------------------------- ---------
----------------------- ----------
------------------------- ---------
--------------------- ----------
---------------------- ----------
-------- ---------
-------------- ----------
----------- --------
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fbdd71f6b2d6eab31f6288