看完 《前端规范之Git工作流规范(Husky + Commitlint + Lint-staged) https://www.cnblogs.com/Yellow-ice/p/15349873.html》,再次修改本文
团队人一多,提交一多,还是要对备注加以区分,好快速找到变更点。这时候就需要对每次提交,需要输入message,对提交的备注进行规范化处理
要想防患于未然,防止将存在潜在问题的代码带到线上环境,最好的办法是在本地提交代码时就能够扫描出潜在的错误,并强制将其修改后才能提交,这样就不会将问题代码携带到线上,就能保证线上代码至少不会存在低级的程序错误。
有些同学可能会把ESLint、Stylelint或Commitizen提示的错误忽视不见,直接将代码提交到代码仓库中。这样做的话,那么其他同学在pull代码并diff代码时可能会出现大段代码标红,同时在进行CI时又可能因为代码风格或规范问题被打回重改。
如何让大家在提交代码时需要确保本地的代码或Commit Message已经通过检查才能够push到代码仓库,从而更好的保障代码质量呢?
可以用 Husky + Commintlint + Lint-staged打造规范的Git检查工作流,确保我们的代码只有符合规范才能提交到代码仓库。
git hook,也就是常说的Git钩子。
Git能在特定的重要动作发生时触发自定义脚本。有两组这样的钩子:客户端的和服务器端的。
客户端钩子我们可能用的比较多,客户端钩子通常包括了提交工作流钩子、电子邮件工作流钩子和其它钩子。这些钩子通常存储在项目的.git/hooks目录下,我们需要关注的主要是提交工作流钩子。提交工作流钩子主要包括了以下四种:
在上面的钩子中,我们需要关注pre-commit和commit-msg钩子。
每次提交,Commit message 都包括三个部分:header,body,footer
版本正式发布前需要生成changelog文档,然后再发布上线
这些规范讲出来,但是大家不一定完全遵守。所以,需要对每次提交加钩子,镜像验证
husky是常见的git hook工具,使用husky可以挂载Git钩子,当我们本地进行git commit或git push等操作前,能够执行其它一些操作,比如进行ESLint检查,如果不通过,就不允许commit或push。
具体参看:https://typicode.github.io/husky/#/
并在package.josn里添加如下命令
"prepare": "husky install"
运行完会生成.husky文件夹,在.husky文件夹下有一个pre-commit,这个文件是用来定义git commit之前应该执行什么命令,默认内容如下
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
#npm test
#自定义命令,手动添加
npm run lint:eslint
npm run lint:stylelint
你可以进行自定义命令,来进行提交前的校验
默认情况下上面的命令会对所有的代码进行校验,这无疑是非常浪费时间的。这时候我们需要借助 lint-staged
来对暂存的 git 文件运行校验
具体查看:https://www.npmjs.com/package/lint-staged
在package.json 里添加如下代码
{
"lint-staged": {
"src/**/*.{less,scss,css}": [
"stylelint --fix --syntax=less",
"git add ."
],
"src/**/*.{js,ts,tsx,vue}": [
"eslint ./src --ext .js,.tsx,.ts,.vue --cache --fix",
"git add ."
]
},
"scripts": {
"lint": "eslint --fix src",
"lint:style": "stylelint --fix ./**/*.{scss,css,vue} --custom-syntax",
"prepare": "husky install"
},
"devDependencies": {
"@blueking/eslint-config-bk": "^2.1.0-beta.6",
"@blueking/stylelint-config-bk": "^2.0.0",
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"bk-vision-cli": "^4.0.4",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
}
}
创建 commitlint.config.js
在根目录下创建 . commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feature',
'feat',
'bug',
'fix',
'bugfix',
'refactor',
'perf',
'style',
'test',
'docs',
'info',
'format',
'merge',
'depend',
'chore',
'del',
],
],
'subject-valid': [2, 'always'],
},
plugins: [
{
rules: {
'subject-valid'({ subject }) {
console.log('it is a subject', subject);
return [
/^[\s\S]+?(issue\s+#\d+)$/i.test(subject),
'commit-msg should end with (issue #{issueId})',
];
},
},
},
],
};
工程结构如下:
增加.eslintrc.js扫描规则:(.eslintrc.js)
module.exports = {
root: true,
extends: ['@blueking/eslint-config-bk/tsvue3'],
rules: {
'no-param-reassign': 0,
'@typescript-eslint/naming-convention': 0
}
};
增加style-lint 规则(.stylelintrc.js)
module.exports = {
defaultSeverity: 'error',
extends: ['@blueking/stylelint-config-bk']
}
增加.prettierrc.js文件,用于在扫描通过后格式化代码(该步骤可选,如果不引入prettier的话,相应的在package和eslintrc中去除掉相应配置即可)
module.exports = {
printWidth: 80,
semi: true,
singleQuote: true,
trailingComma: 'none',
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: 'avoid',
requirePragma: false,
proseWrap: 'preserve'
};
加了钩子后提交:git commit -m "XXX",发现提交不了,报错
下面是常见的错误
因为没有此配置:因为zsh缺省情况下始终自己解释这个 *.h,而不会传递给 find 来解释。
提交代码的时候,pre-commit(客户端)钩子,它会在Git键入提交信息前运行做代码风格检查。如果代码不符合相应规则,则报错,而它的检测规则就是根据.git/hooks/pre-commit文件里面的相关定义。
解决办法:
参考文章:
eslint+husky+prettier+lint-staged提升前端应用质量 :https://www.jianshu.com/p/bea740c966e9
husky介绍及使用 https://www.cnblogs.com/jiaoshou/p/12222665.html
GitHook 工具 —— husky介绍及使用 https://www.cnblogs.com/jiaoshou/p/12222665.html
前端规范之Git工作流规范 Husky + lint-staged https://blog.csdn.net/weixin_41897680/article/details/125233875
转载本站文章《项目git commit时卡主不良代码:husky让Git检查代码规范化工作》, 请注明出处:https://www.zhoulujun.cn/html/tools/VCS/git/8582.html
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。