大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。已进行四个月了，很多小伙伴表示收获颇丰。

想学源码，极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。同时推荐参与源码共读活动。

感谢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/shecho 'start check your code，please wait...'
# git diff 获取更改的内容 可以通过参数--diff-filter 配置条件
npx eslint $(git diff --cached --name-only --diff-filter=ACM -- '*.js')
# 变量$?--->上一个命令的执行状态结果
if [ $? != '0' ];thenecho "ending and failed，please check your code；"exit 1
elseecho "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/shecho 'start check your code，please wait...'
# git diff 获取更改的内容 可以通过参数--diff-filter 配置条件
npx eslint $(git diff --cached --name-only --diff-filter=ACM -- '*.js')
# 变量$?--->上一个命令的执行状态结果
if [ $? != '0' ];thenecho "ending and failed，please check your code；"exit 1
elseecho "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

使用新建commitlint.config.js

module.exports = {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：不属于以上类型的其他类型(日常事务)

optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。

description：一句话描述此次提交的主要内容，做到言简意赅。

这时候，执行一次测试一下

git add .
git commit -m 'test'

因为该提交的 commit 是不规范的所以提交时失败的 如下图

如果把 commit 修改，就会提交成功，因为符合 commit 规范

git add .
git commit -m 'feat: test'

但是问题又来了，每次 commit 都要输入，有点不方便；而且有可能输错 下面就介绍到 commitizen

commitizen

cz-commitlint

生成符合规范的 commit message

本地安装并没有全局安装，当然可以全局安装具体查看官方文档，全局安装可以使用git cz，cz-commitlint打通 commitizen 和commitlint配置

npm install --save-dev @commitlint/cz-commitlint commitizen

然后

npx commitizen init cz-conventional-changelog --save-dev --save-exact

package.json添加script

{"scripts": {"commit": "git-cz"},"config": {"commitizen": {"path": "@commitlint/cz-commitlint"}}
}

新建commitlint.config.js

module.exports = {extends: ['@commitlint/config-conventional']
}

然后执行

git add .
npm run commit

发现为中文提示如下图

再次修改commitlint.config.js

module.exports = {extends: ['@commitlint/config-conventional'],prompt: {questions: {type: {description: '选择你要提交的类型:',enum: {feat: {description: '新功能',title: 'Features',emoji: '✨'},fix: {description: '修复相关bug',title: 'Bug Fixes',emoji: '												


											

你提交代码前没有校验？巧用gitHooks解决相关推荐
	

    
								
  1. 提交代码前问自己七个问题！
		
    为什么写出好的代码是如此之难? 为什么经过了这么多年的努力,有这么多的最佳实践/工具/方法学 (例如:瀑布式开发,迭代开发,Scrum , XP, 单元测试,TDD,持续集成,UML,Code Rev ...
    
		
    2. 
						
  2. 提交代码前没有用svn st命令(只用了svn diff)， 差点踩坑！
		
    我还是建议大家在Windows上通过对比工具来提交程序, Windows上一切可见, 一目了然啊. 文件状态用颜色区分得一清二楚. 当然, 有的时候, 我们也可以在linux下提交程序. 最近我直接在 ...
    
		
    3. 
						
  3. SVN 检查修改或者提交代码时候一直显示please wait的解决办法(汉化版本显示请稍候)
		
    在提交使用vue写的前端代码时候一直显示"请稍候",检查修改时候也是这样显示. 原因是 : 下载代码后 npm install 安装了依赖. 可以在SVN中取消对相关依赖的控制.  ...
    
		
    4. 
						
  4. 用Prettier和ESlint来统一提交代码
		
    2019独角兽企业重金招聘Python工程师标准>>> 为什么使用 很遗憾,JavaScript没有官方的代码风格.业界有一些流行的代码风格,比如Airbnb和Standard.使用 ...
    
		
    5. 
						
  5. git提交代码会报 vue-cli-service lint found some errors. Please fix them and try committing again
		
    转载:https://blog.csdn.net/j15533415886/article/details/92003047 转载:https://blog.csdn.net/qq_42180156/ ...
    
		
    6. 
						
  6. git提交代码报 vue-cli-service lint found some errors. Please fix them and try committing again
		
    原因: 问过度娘在提交代码的时候,它会在提交代码前运行做代码风格检查,如果代码不符合相应规则,则报错. 解决: 直接把pre-commit文件删除,进入项目.git文件夹-hooks-删除 .如何你的 ...
    
		
    7. 
						
  7. git 公钥提交代码_Git提交代码push的时候报错常见错误
		
    今天我想rk的sdk包里面的一些东西提交到我的git服务器上,结果,总是报错,折腾了一下午,结果才解决. 首先看看我提交代码的时候,报错的信息: git.exe push --progress &qu ...
    
		
    8. 
						
  8. git clone 某次提交前代码_git提交代码常用命令
		
    1.在网页上fork中心仓到自己私有仓 2.本地clone自己的私有仓:git clone 自己的私有仓地址 3.本地添加中心仓分支地址: git remote add upstream ssh:// ...
    
		
    9. 
						
  9. antd  表单提交，文件和表单内容一起提交，表单校验
		
    用很简单的源码实现包含下列 antd 表单相关知识: 1.表单必填校验,规则校验 2.Upload 上传图片,获取上传图片的状态,如上传成功,上传失败,上传进度条,删除上传的文件 3.获取 Input ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 百度程序员抱怨：告诉下家去哪里，才给批准离职！
		
    2. 
						
  2. 人工智能都沸腾3年了，现在就业情况还乐观吗？
		
    3. 
						
  3. java spring怎么运行_java – 如何使用spring异步运行方法？
		
    4. 
						
  4. python编程能力等级测试_56岁的潘石屹参加全国青少年编程能力等级测试，你还在问编程是什么？...
		
    5. 
						
  5. python中xpath_Python爬虫之Xpath语法
		
    6. 
						
  6. Decorator模式
		
    7. 
						
  7. 手机的哪些功能是几乎没人用的？
		
    8. 
						
  8. 简单好用的照片恢复软件推荐
		
    9. 
						
  9. spring mvc静态资源放行
		
    10. 
						
  10. Facebook POP，迈向大师操作之路
		
    11. 
						
  11. oracle 会话数上不去_（一）UDS诊断服务中的诊断会话控制（DiagnosticSessionControl，0x10）...
		
    12. 
						
  12. win8 计算机内存不足怎么办,如何解决Win8电脑内存不足的问题？
		
    13. 
						
  13. 哔哩哔哩 BV、AV互转 C#版
		
    14. 
						
  14. 3行代码爬取京东数据
		
    15. 
						
  15. Geometric multimodal representation learning
		
    16. 
						
  16. oracle中的blob类型,clob类型,nclob类型主要区别是什么
		
    17. 
						
  17. 如何通过视频推广让你的App一夜爆红
		
    18. 
						
  18. js php mysql 是b,MySQL_BBS(php  mysql)完整版(七)，//下面是  top.js      function KB_kee - phpStudy...
		
    19. 
						
  19. 莫烦python神经网络进化(NeuroEvolution)之最全篇
		
    20. 
						
  20. html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
		
    21. 
		

	


热门文章
	

    
									
  1. w8计算机配置要求,win8系统最低配置要求有哪些|win8系统是否有最低配置要求－系统城...
			
    2. 
						
  2. socket用法linux,linux socket编程，要用到哪些函数，和用法介绍？_Linux_天涯问答_天涯社区...
			
    3. 
						
  3. oracle 导入excel时间格式,将.xls或者.excel格式的数据导入到Oracle中
			
    4. 
						
  4. Jena Fuseki安装完成后不能添加数据库
			
    5. 
						
  5. 【洛谷P2680】运输计划
			
    6. 
						
  6. C++ const的使用
			
    7. 
						
  7. 转： vim 的编辑格式设置
			
    8. 
						
  8. BZOJ_1798__Codevs_2216_[AHOI_2009]_行星序列_(线段树)
			
    9. 
						
  9. Objective-C中的@property和@synthesize用法
			
    10. 
						
  10. CSS3动画@keyframes中translate和scale混用出错问题
			
    11.