团队项目中,一般我们会统一代码提交规范。这里简单介绍下使用git钩子插件来规范化提交代码。
1. 简介
在git中,每次执行git commit, git push等操作时,会触发一个或多个shell脚本,这些脚本称为钩子,存放在 .git/hooks 目录下。钩子分为前置钩子和后置钩子,前置钩子为git命令调用前执行,后置钩子为git命令完成后执行。
所以在git命令提交时,我们可以额外做一些事情,比如提交前的代码检测,提交后的部署等功能。下面我们借助插件来实现代码提交前的commit信息校验,代码格式化,代码检测等功能。
2. 步骤
2.1 安装插件
首先安装husky, pretty-quick,lint-staged,commitlint, eslint插件。
cnpm i husky pretty-quick lint-staged commitlint eslint --save-dev
复制代码
- husky: 在 .git/hooks 中写入 pre-commit 等脚本激活钩子,在 Git 操作时触发
- pretty-quick:代码格式化
- lint-staged:每次提交时只检查本次提交的暂存区的文件
- commitlint:对git每次提交的commit信息做格式校验
- eslint: 代码质量检测
2.2 修改package.json
修改package.json配置,设置lint-staged和husky。
"lint-staged": {
"linters": {
"**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
}
复制代码
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged && lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
复制代码
- 安装husky后在.git/hooks里写入pre-commit钩子,git commit提交之前执行 pretty-quick --staged && lint-staged 命令。
- pretty-quick 对提交的文件进行格式化,需要配置prettier.config.js。
- lint-staged 参考package.json里lint-staged的设置,利用linters对暂存区的文件路径应用过滤规则,匹配的文件执行后面配置的任务,这里是执行eslint代码检测,把没有问题的代码执行git add命令放入暂存区。
- 第二个是对提交信息做格式校验,commitlint -E HUSKY_GIT_PARAMS,需要配置commitlint.config.js文件。
- 如果任务执行过程中有报错,就退出,不执行代码commit提交。
2.3 添加配置文件
下面的配置文件仅供参考。
// prettier.config.js
module.exports = {
printWidth: 120, //一行的字符数,如果超过会进行换行,默认为80
tabWidth: 2, //一个tab代表几个空格数,默认为80
useTabs: false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减
singleQuote: true, //字符串是否使用单引号,默认为false,使用双引号
semi: true, //行位是否使用分号,默认为true
};
复制代码
// commitlint.config.js
module.exports = {
rules: {
'type-enum': [
2,
'always',
[
'build',
'ci',
'chore',
'merge',
'docs',
'feat',
'fix',
'test'
]
],
'body-leading-blank': [1, 'always'],
'footer-leading-blank': [1, 'always'],
}
};
复制代码
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '@vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
quotes: [1, 'single'],
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
},
parserOptions: {
parser: 'babel-eslint'
}
};
复制代码