husky + lint-staged + eslint + commitlint + commitizen工程配置

先介绍下这几个库的作用：

• husky 是一个用于在 Git 仓库中使用 Git hooks 的工具。Git hooks 允许在 Git 的不同生命周期事件中执行自定义脚本，以便在这些事件发生时自动运行特定的任务或检查
• commitlint 检查您的提交消息是否符合常规的提交格式
• commitizen 提供了一个命令行界面，帮助开发人员按照统一的提交规范生成规范化的提交信息。
• Eslint 静态地分析你的代码，以快速发现问题
• prettier 是代码格式化工具

husky

目前一些文件关于husky版本较低(v4)，本文档是关于husky v8 注意：husky v4 和 husky v8使用方法不同。参考：migrating from v4。

1. 安装 husky

npm install husky --save-dev

2. Enable Git hooks

npx husky install

在工作目录会看到多了一个 .husky 文件夹

3. 要想在安装后自动启用 Git 钩子，请编辑 package.json

{
  "scripts": {
    "prepare": "husky install" 
  }
}

关于prepare可以参考：prepare

4. Create a hook

npx husky add .husky/pre-commit "echo pre-commit hook run"

执行完脚本会看到.husky目录下多了一个pre-commit文件：

文件内容如下：

6. 可以增加其他hook

npx husky add .husky/commit-msg "echo pre-commit hook run"

7. 查看效果 执行git commit,看到终端有打印如下信息：

commitlint

commitlint帮助你的团队遵守提交惯例。通过支持npm安装的配置，它使提交约定的共享变得简单

1. 安装,需要安装两个包。@commitlint/config-conventional是规范配置，它遵循常见的约定式提交规范（Conventional Commits），例如 Angular 团队的提交规范

npm install --save-dev @commitlint/{cli,config-conventional}

2. 生成配置文件

echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

3. 配置husky

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

现在的commit-msg 文件为： 4. 测试提交 commit 不合规的commit message会被拒绝：

合规的会通过：

commitizen

Commitizen 是一个用于规范化和简化 Git 提交流程的工具。它提供了一个命令行界面，帮助开发人员按照统一的提交规范生成规范化的提交信息。通过使用 Commitizen，团队成员可以更轻松地遵循预定义的提交规范，以提高代码提交的可读性、一致性和可维护性。当你用Commitizen提交时，你会被提示在提交时填写任何必要的提交字段

1. 安装

pm install --save-dev commitizen

2. 初始化项目

commitizen init cz-conventional-changelog --save-dev --save-exact

上述命令为你做了三件事：

安装cz-conventional-changelog适配器npm模块
将其保存到package.json的依赖项或devDependencies中
将config.commitizen密钥添加到package.json文件的根目录，如图所示：

3. 提交时执行命令 git cz

Eslint

ESLint是一个识别和报告ECMAScript/JavaScript代码中发现的模式的工具，目的是使代码更加一致和避免错误。

Eslint会单独写篇文章，这里先说下如何在commit之前做eslint校验，现在假定你的项目eslint配置已经配好。

需要修改 pre-commit 文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

eslint src/** --fix
git add .

prettier

Prettier 是代码格式化工具 配置参考eslint

lint-staged

lint-staged的作用是针对暂存的git文件运行linters，不要让屎代码溜进你的代码库

在提交代码前运行Linting会更有意义。通过这样做，你可以确保没有错误进入版本库并强制执行代码风格。但是在整个项目上运行一个提示过程是很慢的，而且提示的结果可能是不相关的。最终，你只想对将要提交的文件进行检查

1. 安装 lint-staged

 npm install --save-dev lint-staged

2. 配置 lint-staged

3. 修改husky

参考文档：

husky

commitlint

commitizen

eslint prettier