巧⽤gitHooks提交前校验代码
感谢bigAken投稿
在每⼀个使⽤ git 进⾏版本管理的仓库，都有⼀个⽬录 .git/hooks，包含 commit 各个阶段 Hooks 的脚本。这些 Hooks 在 git 操作commit、push、merge 等得时候，可以做前置或者后置的操作，例如 pre-commit 在 git commit 前可以做代码校验，校验代码的时候使⽤的ESLint，格式化使⽤的是 prettier。Git ⽀持的常⽤钩⼦见下表，更多请查看官⽹Hooks:
Git Hook调⽤时机调⽤时机
pre-commit git commit 执⾏前可以⽤ git commit --no-verify 绕过
commit-msg git commit 执⾏前可以⽤ git commit --no-verify 绕过
pre-merge-commit git merge 执⾏前可以⽤ git merge --no-verify 绕过
pre-push git push 执⾏前
本⽂先实践，怎么去写 pre-commit 这个 git hooks，然后介绍 husky，lint-staged，commitlint 的使⽤
在 git 项⽬中，.git/hooks下⾯有很多 hooks ⽰例如下
这些 git hooks 都是.sample结尾的，如果要启⽤某个 hooks ⽤可以去掉.sample结尾
实践
npm init -y初始化⼀个项⽬，然后git init，然后npm install eslint --save-dev
新建.gitignore⽂件
node_modules
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
*-lock.json
*.lock
新建.eslintrc，配置 eslint
{
"rules": {
// 要求使⽤分号
"semi": ["error", "always"],
// 强制使⽤⼀致的反勾号、双引号或单引号
"quotes": ["error", "double"]
}
}
新建src⽬录，然后⾥⾯新建index.js，禁⽌使⽤快捷键格式化
console.log('object')
根⽬录新建⽂件夹.customGitHooks然后 git config 'core.hooksPath' .customGitHooks，主要是设置 gitHooks 的存放⽬录，因为 gitHooks 默认存放⽬录是.git/hooks，新建pre-commit，写⼊如下
#!/bin/sh
echo 'start check your code，'
# git diff 获取更改的内容可以通过参数--diff-filter 配置条件
npx eslint $(git diff --cached --name-only --diff-filter=ACM -- '*.js')
enum怎么用# 变量$?--->上⼀个命令的执⾏状态结果
if [ $? != '0' ];then
echo "ending and failed，please check your code；"
exit 1
else
echo "check pass"
fi
这时候，执⾏git add .，git commit -m 'test'就会发现没有 commit 成功，报错了，如下图
如果把 index.js 的代码修改如下：
console.log('object')
执⾏git add . ，git commit -m 'test'就会发现 eslint 代码检查通过了，能正常提交了，以上实践能很好解释 commit 前怎么检验代码，但是有个缺点就是别⼈ pull 你的代码要执⾏git config 'core.hooksPath' .customGitHooks能起作⽤；下⾯就介绍 husky，lint-
staged，commitlint 的使⽤
.git ⽂件夹不会被跟踪并且上传⾄远程仓库的
Husky
github为了解决.git配置不能提交远程仓库的问题，husky 出来了，husky 在你npm i安装完依赖只有⾃动执⾏husky install
安装 npm install husky -D
npm install husky -D
使⽤
编辑package.json在script⾥添加prepare的值为husky install
"scripts": {
"prepare":"husky install"
},
然后执⾏npm run prepare，做了什么事呢
源码index.ts中，我们看到执⾏ husky install 实际上就是创建 .husky ⽬录，复制../husky.sh⽂件到该⽬录下，配置了⼀个.gitignore，设置
了core.hooksPath（设置 .husky ⽬录为 git hooks ⽬录）
添加⼀个 hook
在.husky⽬录下创建pre-commit
#!/bin/sh
echo 'start check your code，'
# git diff 获取更改的内容可以通过参数--diff-filter 配置条件
npx eslint $(git diff --cached --name-only --diff-filter=ACM -- '*.js')
# 变量$?--->上⼀个命令的执⾏状态结果
if [ $? != '0' ];then
echo "ending and failed，please check your code；"
exit 1
else
echo "check pass"
fi
index.js⽂件内容如下
console.log('object')
然后执⾏git add .，git commit -m 'test'发现代码已经被拦截，没有提交，因为index.js代码不符合规范
遗留问题就是 git hooks 不会编写怎么办，下⾯ lint-staged 出来了
lint-staged
配置例⼦作⽤：对 Git 暂存区代码⽂件进⾏ bash 命令操作等等
npm i lint-staged -D
根⽬录下新建.lintstagedrc⽂件
{
"*.js": "eslint"
}
把husky⽬录下的pre-commit修改如下
. "$(dirname "$0")/_/husky.sh"
npm run lint
package.json添加script
"scripts": {
"lint": "lint-staged"
}
index.js如下
console.log('object')
console.log('object')
执⾏git add .，git commit -m 'test'，可以发现调⽤了 eslint 去检查代码，检查不通过就退出commit
综上，代码检测规范有了，现在也需要规范⼀下提交规范；
commitlint
github
校验 commit 提交的信息
npm install --save-dev @commitlint/config-conventional @commitlint/cli
使⽤新建fig.js
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [2, 'always', ['build', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'style', 'test', 'revert', 'chore']],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
}
配置git hooks，执⾏下⾯命令
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
commit message ⼀般分为三个部分 Header，Body 和 Footer
header
<type>(<scope>): <subject>
// 空⼀⾏
<body>
// 空⼀⾏
<footer>
其中，Header 是必需的，Body 和 Footer 可以省略
接下来提交的 commit 必须符合下⾯的格式
注意冒号后⾯有空格
git commit -m <type>[optional scope]: <description>
常⽤的 type 类别
build：主要⽬的是修改项⽬构建系统(例如 glup，webpack，rollup 的配置等)的提交
ci：主要⽬的是修改项⽬继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交docs：⽂档更新
feat：新增功能
fix：bug 修复
perf：性能优化
refactor：重构代码(既没有新增功能，也没有修复 bug)
style：不影响程序逻辑的代码修改(修改空⽩字符，补全缺失的分号等)
test：新增测试⽤例或是更新现有测试
revert：回滚某个更早之前的提交
chore：不属于以上类型的其他类型(⽇常事务)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。