pre-commit钩子,代码质量检查

56次阅读

共计 2768 个字符,预计需要花费 7 分钟才能阅读完成。

目前基本使用三款 js 代码质量检查工具:jslint, jshint, eslint。许多 IDE 里面也有对应的检查插件,在每次 ctrl + s 保存文件的时候,检查当前文件是否符合规范,保证代码质量。许多团队都会指定一套代码规范 code review, 更加严格的检查每次代码修改。也可以在 git commit 之前,检查代码,保证所有提交到版本库中的代码都是符合规范的,
在看 vue 源码时,不免修改代码,就会触发里面配置好的钩子函数。于是,仔细研究了一下 vue 配置方法,可以发现配置非常简单。
git 钩子文档上介绍非常详细,git init 后,在.git/hooks 文件中,有一些.simple 结尾的钩子示例脚本,如果想启用对应的钩子函数,只需手动删除后缀。所以,列出两种配置方法:
1. 手动修改钩子文件
按照文档上,配置钩子脚本,修改 hooks 中文件名对应的钩子文件,启用钩子。使用 shell 脚本检查,可以参考 vue1.x 里面如何使用
!/usr/bin/env bash

# get files to be linted
FILES=$(git diff –cached –name-only | grep -E ‘^src|^test/unit/specs|^test/e2e’)

# lint them if any
if [[$FILES]]; then
./node_modules/.bin/eslint $FILES
fi
文件名是 pre-commit, 在 commit 之前启用的钩子函数,利用 git diff 查看当前有哪些文件修改过,只对指定文件夹中修改的文件使用 eslint 进行代码检查,渐进式对整个项目实现代码规范。
脚本写好后,不用每次都手动复制到.git/hooks 目录下,只需对当前文件创建软连接,到指定目录,在 package.json 中配置脚本命令,
“scripts”: {
“install-hook”: “ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit”,
}
在项目初始化后,执行 npm run install-hook, 很方便地配置好了 pre-commit 钩子
2. 利用 yorkie or husky + lint-staged 构建钩子
在 vue 最新的版本中,已经使用尤大改写的 youkie,youkie 实际是 fork husky, 然后做了一些定制化的改动,使得钩子能从 package.json 的 “gitHooks” 属性中读取,
{
“gitHooks”: {
“pre-commit”: “foo”
}
}
使用方法跟 husky 类似,可以查看 husky 文档,介绍非常详细。
npm install husky –save-dev
# or npm install yorkie –save-dev
安装完成后,可以发现已经改写了 hooks 目录中的文件,只需在 package.json 中配置对应钩子要执行的脚本。husky 配置:
// package.json
{
“husky”: {
“hooks”: {
“pre-commit”: “npm test”,
“pre-push”: “npm test”,
“…”: “…”
}
}
}
回头看看,vue 中如何配置
// package.json
“gitHooks”: {
“pre-commit”: “lint-staged”,
“commit-msg”: “node scripts/verify-commit-msg.js”
}
“lint-staged”: {
“*.js”: [
“eslint –fix”,
“git add”
]
}

前面提到,利用 git diff, 只 lint 当前改动的文件,lint-staged 就非常准确的解决了这一问题,从这个包名,就可以看出,Run linters on git staged files,只针对改动的文件进行处理。结合 husky 一起使用,安装依赖:
npm install –save-dev lint-staged husky
修改 package.json 文件
{
+ “husky”: {
+ “hooks”: {
+ “pre-commit”: “lint-staged”
+ }
+ },
+ “lint-staged”: {
+ “*.js”: [“eslint –fix”, “git add”]
+ }
}
使用了 eslint, 需要配置.eslintrc, lint-staged 还有一个好处,可以在 lint 后,更加灵活,执行其他脚本,尝试进行修改错误,比如 eslint –fix 检查后并修复错误。
上面列出的 vue 文件使用了类似的配置,另外增加了 commit-msg 钩子,对提交说明进行检查,在 scripts/verify-commit-msg.js 文件中可以找到检查脚本,
const chalk = require(‘chalk’)
const msgPath = process.env.GIT_PARAMS
const msg = require(‘fs’).readFileSync(msgPath, ‘utf-8’).trim()

const commitRE = /^(revert:)?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
console.log()
console.error(
` ${chalk.bgRed.white(‘ ERROR ‘)} ${chalk.red(`invalid commit message format.`)}\n\n` +
chalk.red(` Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
` ${chalk.green(`feat(compiler): add ‘comments’ option`)}\n` +
` ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
chalk.red(` See .github/COMMIT_CONVENTION.md for more details.\n`) +
chalk.red(` You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
)
process.exit(1)
}
利用 process.env.GIT_PARAMS 找到目录,读取 msg 说明,进行检查。
使用 husky 要注意,对应属性名已经改为 HUSKY_GIT_PARAMS , 而不是原始的 GIT_PARAMS 环境变量。

正文完
 0