前端类技术文章：结合 ESLint 和 Husky 实现 Git 提交代码自动检查

在现代化的前端开发中，代码质量成为了一个前端开发者必备的素质。我们可以从日常工作中了解到，若出现了低质量的代码，很容易会导致开发和维护成本的显著增加。因此，了解并掌握一些代码质量管理工具可以为我们节省大量时间和精力。

本文将对两个常用的前端代码质量检查工具——ESLint 和 Husky 进行讲解，并针对如何结合 Git 创建提交钩子来完成代码的自动检查。

了解 ESLint

ESLint 是一个用于描述和修复 JavaScript 代码问题的工具。它可以帮助我们在编写代码时尽早发现潜在的问题，并给出良好的建议来提高代码质量。

ESLint 的安装

在安装 ESLint 之前，需要确保 Node.js 保持最新版本。然后在命令行窗口中输入以下命令来全局安装 ESLint：

npm install -g eslint

ESLint 的配置

ESLint 的默认配置与个人或项目的需求或标准可能会有所不同，因此，ESLint 提供了多种配置方式，供用户根据自己情况进行选择。

ESLint 的官方配置包括了许多常见的规范，并将它们封装到了一组插件中。下面介绍如何在项目中纳入 ESLint 的官方配置包：

在项目根目录下，运行以下命令，以安装基本的 ESLint 配置包及其所有依赖项：

npm install --save-dev eslint eslint-plugin-import eslint-config-airbnb-base

其中，“airbnb” 是一个流行的 JavaScript 标准，在 ESLint 配置包中也是一种流行的规范。

在项目根目录下，创建一个名为 .eslintrc.json 的 JSON 配置文件：

{
    "extends": "airbnb-base",
    "rules": {
        "no-console": "off"
    }
}

这里最重要的是，我们选择了 airbnb 配置作为我们自己项目的代码规范基础，并添加了一些自定义规则：把 no-console 规则关闭。这个规则非常理解，因为我们经常需要使用 Console 来输出错误、调试和测试信息等，所以关闭这个规则可以使我们更加灵活地使用 Console。

在编辑器中使用 ESLint

VS Code、WebStorm 等现代化 IDE 已经集成了 ESLint ，可以帮助我们在编辑 JavaScript 文件时及时发现问题，并提供了友好的提示和修复方案。

了解 Husky

Husky 是一个 Git 提交时的钩子帮助库，它可以让我们在 Git 提交代码之前或之后插入自己的脚本。

Husky 的安装

在命令行中输入以下命令来全局安装 Husky：

npm install -g husky

安装完毕后，我们可以在 Git 仓库中的目录下建立名为 .husky 的目录，以便存储 Husky 钩子所需的文件和脚本。

Husky 的配置

Husky 的配置非常简单，我们只需在 .husky 目录下创建两个脚本即可：

在 .husky 目录中，创建名为 pre-commit 的文件，并指定要运行的钩子：

#!/bin/sh
npm run eslint

这个脚本的作用是在我们提交之前，运行本地的 npm run eslint 命令，以保证我们提交的代码符合我们项目团队的规范。

在 package.json 文件中，添加以下两个脚本：

-- -------------------- ---- -------
-
    ---------- -
        --------- ------- ----- -------
        ---------- ------ ------- -------
    --
    ------------------ -
        -------- ---------
        --------- ----------
        ---------------------------- ----------
        ----------------------- ---------
    -
-

其中 eslint 脚本用于修复项目中的问题，包括格式和代码规范问题。prepare 脚本用于初始化钩子，在我们执行 npm install 时自动运行。

为了确保我们的规范检查脚本正确地执行，请确保所有这些脚本都在 package.json 文件中注册并安装了必要的插件。

使用 Husky 管理 Git 的提交

在我们使用 Git 进行提交代码之前，可以先执行以下命令：

npm run prepare

这会自动为使用代码仓库的每个硬件绑定 Husky 钩子，使得我们可以在提交前运行自定义的代码规范检查，以保证每次的代码提交都是高质量的。

Husky 的指导意义

相比于其他的代码质量检测工具，Husky 拥有着极高的灵活性和安全性，使得我们可以在前端代码管理的过程中更加高效和自信。

示例代码

下面附上一个可以用于实践的简单示例代码，以帮助大家更好地了解如何使用 ESLint 和 Husky 实现代码质量自动检查的功能。

-- -------------------- ---- -------
------ --- ---- ------
------ --- ---- ------------

--- -----
  --- -------
  ------- - -- -------
---

------------------ --------

运行上述代码后，我们可以看到 setup 脚本提示：No issues were found。

总结

通过结合 ESLint 和 Husky，我们可以在 Git 提交代码时自动检查代码的质量。这样就可以确保代码符合团队规范，提高代码质量，减少代码的错误和维护成本。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6481a09a48841e989411b195