简介
在做前端开发过程中，我们经常需要将代码提交到版本控制仓库（如 Git）。但是，很多开发者可能会在提交前忘记运行代码规范检查、代码风格检查等，导致提交了有问题的代码。这个时候，我们需要一个工具来帮助我们在提交前自动运行这些检查，这就是 pre-commit 工具。
@jsumners/pre-commit 是一个基于 Node.js 的 pre-commit 工具包，可以帮助您在提交代码前运行各种检查，如代码规范检查、代码风格检查、单元测试等。使用该工具包可以帮助项目团队保持代码质量。
安装
使用 npm 安装 @jsumners/pre-commit，命令如下：
npm install --save-dev @jsumners/pre-commit
使用方法
使用 @jsumners/pre-commit 需要进行以下几个步骤：
- 编写 pre-commit 配置文件
- 在 package.json 中添加 pre-commit 脚本
- 执行 pre-commit 工具
步骤 1：编写 pre-commit 配置文件
pre-commit 配置文件是一个 JSON 格式的文件，它指定了需要运行哪些命令，以及命令的名称、描述、和要检查文件的路径。例如：
-- -------------------- ---- -------
-
---------- -
--------- -
-------------- ---- ------ -- -------- -------
---------- ------- ------- ----- ------------
--
------------ -
-------------- ---- --- ---- -------
---------- ---- --- -----
-
--
-------- -
----- ---------- -------------
----- ---------- ------------
-
-在上面的配置文件中，定义了两个命令，并将它们绑定到两种文件类型上。
步骤 2：在 package.json 中添加 pre-commit 脚本
在 package.json 文件中，添加 pre-commit 脚本，指定要运行的 pre-commit 命令。例如：
{
"scripts": {
"precommit": "pre-commit run --staged"
}
}上面的脚本将所有加入 git 暂存区的修改过的文件作为参数，运行 pre-commit 命令。
步骤 3：执行 pre-commit 工具
在工作区进行修改后，使用 git add 命令添加修改过的文件到暂存区。然后，在命令行运行以下命令：
npm run precommit
上面的命令将运行所有 pre-commit 命令，以此来检查修改后的文件。
示例代码
为了演示使用 @jsumners/pre-commit 可以帮助我们在提交前运行 eslint 和 unit test，我们假设有一个名为 main.js 的文件，其中包含如下代码：
function calculate(a, b, c) {
if (a === b) {
return c;
}
return a + b + c;
}上面的代码中，存在语法上的问题。
现在，将上面的代码推送到 GitHub，并加入到对应项目的 devDependencies：
npm install --save-dev @jsumners/pre-commit
然后，在项目的根目录下，添加一个名为 .pre-commit.json 的系统文件，其中包含如下代码：
-- -------------------- ---- -------
-
---------- -
--------- -
-------------- ---- ------ -- -------- -------
---------- ------- ------- ----- ------------
--
------------ -
-------------- ---- --- ---- -------
---------- ---- --- -----
-
--
-------- -
----- ---------- ------------
-
-上面的代码中，定义了两个命令：“eslint”和“unit-test”；还将这两个命令绑定在拓展名为“js”的文件上。然后，将如下代码添加到 package.json 文件中：
-- -------------------- ---- -------
-
---------- -
------------ ----------- --- ---------
--
------------------ -
----------------------- ---------
--------- ---------
-
-上面的代码中，定义了一个 precommit 脚本，以便将 precommit 命令与变更文件传递给 pre-commit 工具。
再在项目根目录下的 .eslintrc.json 文件中添加如下 eslint 配置：
-- -------------------- ---- -------
-
-------- -
------- --------- ----------
--------- --------- ---------
--
------ -
---------- -----
------ ----
--
---------- -
--------------------
-
-这是一组用于标准的 JavaScript 代码风格的规则。
完成上述操作后，我们提交如下代码：
function calculate(a, b, c) {
if (a === b)
return c;
return a + b + c;
}我们发现，再次提交代码的时候，pre-commit 会拒绝提交，提示我们必须要对代码进行修复。
-- -------------------- ---- ------- - --- ------ -- ------- ------- ----- ----- ---------- ---------------------------------------------- ------- - ------- -- ------ - --------- ---------------------------------------------- --- ------ ----- ----- --------- ---- ---------- ---------- ------ -- ------ ------- ------ --- --- -------- --- --- ------
这一切都归功于我们在第一个阶段中安装和配置的 pre-commit 工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc3967216659e2442a7