前端代码检测流之 Husky + Lint-staged

前言：构建代码检测流的意义

作为前端开发人员，我们都希望提交的代码是高质量的，没有语法错误、逻辑问题或安全漏洞。为了确保代码质量，我们可以使用代码检测工具来帮助我们发现问题，以便在提交代码前及时修复。

目前，前端代码检测流主要分为两种：服务端校验和本地提交校验。

• 服务端校验：通过CI/CD（持续集成/持续交付）工具来实现，在代码提交到代码仓库后，CI/CD工具会自动触发代码检测任务，并将结果反馈给开发人员。服务端校验的优点是，可以对代码进行更全面的检测，并且反馈链路较短，开发人员可以及时收到检测结果。但是，服务端校验的缺点是，如果CI/CD工具出现问题，可能会导致代码检测任务无法正常执行，从而影响代码质量。

• 本地提交校验：通过在本地安装代码检测工具，在提交代码前对代码进行检测，只有当代码通过检测后才能提交。本地提交校验的优点是，可以更快速地发现代码问题，并且可以避免CI/CD工具出现问题而导致的代码质量问题。但是，本地提交校验的缺点是，需要开发人员手动执行代码检测任务，可能会导致检测任务被遗忘或忽略。

使用 Husky 和 Lint-Staged 构建本地提交校验流

为了在本地构建代码检测流，我们可以使用 Husky 和 Lint-Staged 这两个工具。Husky 是一个 Git 钩子工具，可以让我们在 Git 提交代码之前或之后执行特定的任务。Lint-Staged 是一个代码检测工具，可以帮助我们发现代码中的问题。

安装 Husky 和 Lint-Staged

npm install husky lint-staged --save-dev

配置 Husky 和 Lint-Staged

在项目根目录下创建 .huskyrc 文件，内容如下：

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

在项目根目录下创建 .lintstagedrc 文件，内容如下：

{
  "*.js": [
    "eslint --fix"
  ]
}

使用 Husky 和 Lint-Staged 检测代码

现在，当你在 Git 提交代码时，Husky 会自动触发 Lint-Staged 来检测代码。如果代码中存在问题，Lint-Staged 会将问题反馈给你，并阻止你提交代码。

Husky 和 Lint-Staged 的优点

• Husky 和 Lint-Staged 的主要优点是，可以帮助我们更快速地发现代码问题，并且可以避免CI/CD工具出现问题而导致的代码质量问题。
• Husky 和 Lint-Staged 的使用非常简单，只需要安装和配置这两个工具，就可以在本地构建代码检测流。
• Husky 和 Lint-Staged 是开源工具，免费使用。

Husky 和 Lint-Staged 的缺点

• Husky 和 Lint-Staged 的主要缺点是，需要开发人员手动执行代码检测任务，可能会导致检测任务被遗忘或忽略。
• Husky 和 Lint-Staged 只能检测代码中的语法错误、逻辑问题或安全漏洞，无法检测代码中的设计问题或性能问题。