项目中通过git增强开发规范

在前端项目开发中我们经常会使用git管理项目，但是在过程中，我们有时会遇到commit信息不规范导致查看历史提交时不能一眼明了，或者在拉下代码时，碰到很多代码格式上的冲突。今天主要介绍下如何利用git的钩子解决这些问题。

首先我们来了解下常用的钩子

• pre-commit 这个钩子会在commit命令时调用，通常会用来检查本次代码提交的风格，如果不符合会退出提交，也可以通过--no-verify跳过代码检查
• commit-msg 通常用来验证提交信息是否符合规范
• post-commit 在提交完成后执行，可以用来查看本次提交信息
• pre-push 会在git push时调用

其实钩子有很多，上面只是列举常用的，在项目.git/hooks文件夹里我们会看到很多钩子，只要有需要都可以拿来用

接下来我们通过安装 husky 来操作git hooks，通过执行 npm i husky  -D或 yarn add husky -D 将其安装到项目依赖

然后启用husky 手动执行npx husky install

当然也可以设置为自动执行 npm set-script prepare "husky install"，接下来你会在package.json中看到

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

这个命令会在npm install后自动执行

这步操作会在项目根目录生成.husky文件夹

启用后，我们可以就可以通过husky来添加钩子。

例如：npx husky add .husky/钩子名称  "需要添加的命令-cmd"  

添加后我们就可以在.husky里看到有了对应的改变

那么重点来了 接下来我们如何通过钩子约束commit提交的信息呢？

我们可以通过安装commitlint. npm i -D @commitlint/cli @commitlint/config-conventional

然后添加到钩子里  npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1" 

添加后我们就可以验证提交信息了，当然还需要告诉这个包通过什么规则验证提交信息，这点是必须的。规则配置详见官网：commitlint - Lint commit messagesLint commit messageshttps://commitlint.js.org/#/reference-rules

如果想在提交时验证本次提交内容的格式

安装lint-staged -D

然后添加到钩子npx husky add .husky/pre-commit "npx lint-staged"

配置验证规则，这点同样是必须的

GitHub - okonet/lint-staged: 🚫💩 — Run linters on git staged fileshttps://github.com/okonet/lint-staged#configuration