前言

前面的两篇文章已经介绍了如何使用Eslint 和 Stylelint 来规范代码格式。但是有些开发人员会忽视这些错误和警告，直接将代码提交到代码仓库。这就会导致其他其他开发人员pull代码时可能会出现大段代码标红。下面介绍如何使用Husky + Commintlint + Lint-staged打造规范的Git检查工作流，确保我们的代码只有符合规范才能提交到代码仓库。

下面默认已经配置了Eslint 和 Stylelint，不清楚如何配置的可以看：

stylelint实现scss样式格式化

vscode配置eslint格式化vue、react，eslint不好使的问题

Husky

什么是git hook

git hook，也就是常说的Git钩子。
Git能在特定的重要动作发生时触发自定义脚本。有两组这样的钩子：客户端的和服务器端的。客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。

其中，客户端钩子我们可能用的比较多，客户端钩子通常包括了提交工作流钩子、电子邮件工作流钩子和其它钩子。这些钩子通常存储在项目的.git/hooks目录下，我们需要关注的主要是提交工作流钩子。提交工作流钩子主要包括了以下四种：

pre-commit：该钩子在键入提交信息前运行。它用于检查即将提交的快照。如果该钩子以非零值退出，Git 将放弃此次提交，你可以利用该钩子，来检查代码风格是否一致。
prepare-commit-msg：该钩子在启动提交信息编辑器之前，默认信息被创建之后运行。它允许你编辑提交者所看到的默认信息。
commit-msg：该钩子接收一个参数，此参数存有当前提交信息的临时文件的路径。如果该钩子脚本以非零值退出，Git 将放弃提交，因此，可以用来在提交通过前验证项目状态或提交信息。
post-commit：该钩子一般用于通知之类的事情。

在上面的钩子中，我们需要关注pre-commit和commit-msg钩子。

husky

husky是常见的git hook工具，使用husky可以挂载Git钩子，当我们本地进行git commit或git push等操作前，能够执行其它一些操作，比如进行ESLint检查，如果不通过，就不允许commit或push。

我这里安装的是8.x版本，新版本与旧版本的配置有些区别，具体配置见 husky官方文档

安装

npx husky-init
npm install

运行完会生成.husky文件夹，并在package.josn里添加如下命令

"prepare": "husky install"

在.husky文件夹下有一个pre-commit，这个文件是用来定义git commit之前应该执行什么命令，默认内容如下

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npm test

你可以进行自定义命令，来进行提交前的校验，比如：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npm run lint:eslint
npm run lint:stylelint

lint-staged

默认情况下上面的命令会对所有的代码进行校验，这无疑是非常浪费时间的。这时候我们需要借助 lint-staged
来对暂存的 git 文件运行校验

lint-staged官方文档

安装

npm install lint-staged@11.1.2 -D

注：不要安装最新的，会出现问题，后面会介绍什么问题

配置

在package.json 里添加如下代码

"lint-staged": "lint-staged",

创建 .lintstagedrc
在根目录下创建 .lintstagedrc，并添加如下命令

{"src/**/*.{js,ts,tsx,vue}": "npm run lint:eslint","src/**/*.{vue,css,scss}": "npm run lint:stylelint"
}

修改pre-commit文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npm run lint-staged

以后在有其他校验可以写在.lintstagedrc文件里，pre-commit文件里只需要执行npm run lint-staged就行

后面遇到了个这个问题，百度了好久都没找到，最后问了一下公司的大佬，是因为版本太高导致的
解决：卸载掉原来的
安装

npm install lint-staged@11.1.2 -D

前端规范之Git工作流规范 Husky + lint-staged相关推荐

Git 提交规范之GIt工作流规范（Husky+eslint+stylelint+pretty+Commitlint+ lint-staged）
1.ESLint 1.1 ESLint 安装 (1)脚手架自动安装如果是采用脚手架如Vue-Cli创建项目,在创建项目时就可以选择安装ESLint,安装完成后,会自动在项目根目录生成一个.eslin ...
一文读懂Git工作流
Git是目前最流行的代码管理工具,相信大家也都是在用Git来管理自己团队的源代码. 团队一般为了规范开发,保持良好的代码提交记录以及维护 Git 分支结构清晰,方便后续维护等,都会迫切需要一个比较规范 ...
git 工作流和git commit规范
目的统一团队的Git工作流,包括分支使用.tag规范.issue等统一团队的Git Commit日志标准,便于后续代码review,版本发布以及日志自动化生成 git工作流 git flow工作流 ...
husky实现git commit规范
本文首发于个人博客网址:https://www.kelen.cc/posts/husky-commit-rule 开发中如何统一git commit规范,对项目的开发和维护以及问题的回溯都很有效果,接 ...
Git版本管理及工作流规范
1.首先介绍下git的主要区域: 2.为规范源代码版本管理,现将各分支表述如下: a.master分支存放的应该是随时可供在生产环境中部署的代码当开发活动告一段落,产生了一份新的可供部署的代码 ...
超详细的Git提交规范引入指南
最近公司的前端团队分了组,我根据兴趣加入了基础设施建设组,负责做一些方便和规范开发的东西.第一个产出是增加了Git的提交规范,之前参与开源项目时接触到的,感觉很有意思,也很实际,用得到. 参考资料: ...
一个维护版本日志整洁的Git提交规范
1 关于提交日志规范良好的Commit Message有利于代码审查,能更快速查找变更记录,并且可以直接生成Change log. Commit Message的写法规范:conventional- ...
git commit规范、CHANGELOG生成和版本发布的标准自动化
长期以来,大家是不是受限于这种情况:团队中每位成员提交代码时填写的信息随意,没有一定的规范,在出问题后想要定位到某次提交记录时更是难上加难,或者是加上了 commitlint之类的规范,也没有添加ch ...
你可能会忽略的 Git 提交规范
作者:Jartto's blog 来源:http://jartto.wang/2018/07/08/git-commit/?hmsr=toutiao.io&utm_medium=toutiao ...

前端规范之Git工作流规范 Husky + lint-staged

前言

Husky

什么是git hook

husky

lint-staged

前端规范之Git工作流规范 Husky + lint-staged相关推荐

最新文章

热门文章