阅读 540

工程中集成 husky、lint-staged、commitlint

最近在创建一个 webpack5+vue3+typescript+tsx 的一个vue工程,打算用来重构 vue-code-diff

起因

打算在代码提交时,进行 commit 信息格式以及提交内容的代码格式校验,防止出现代码风格和 commit 信息不统一问题,也为后期创建 change-logs 做准备。

添加依赖

yarn add husky lint-staged @commitlint/cli @commitlint/config-angular -D
复制代码
  • husky: 提供githook,例如,我们输入完 git commit -m 'xxxx' 后,就会触发 commit-msg钩子,就可以对 xxxx 内容进行我们规定的格式校验了。
  • @commitlint/cli: 上面我们提到对 xxxx 进行格式校验用的就是这个组件。
  • @commitlint/config-angular: 这个是 angular 的校验风格,我直接使用了这个。如果想自定义的话可以用 @commitlint/config-conventional 组件。
  • lint-staged: 主要作用是只校验我们提交(git add .)的文件代码格式,而不是去校验所有的文件的格式,可以提高校验效率,不然项目大了之后,校验下数据格式估计就是5~6分钟了。

实战

先说一个坑,husky 在升级到6.0.0之后,改动极大。我最开始安装,配置完之后完全无法触发 git 的 hook 。最后去查看官方文档,才发现现在网上的 husky 配置都是比较旧的,完全不能使用。

接下来我们一步步操作。

Enable Git hooks

这个 install 不是组件安装,而是相当于注册 husky-hook 到 git 上面。

npx husky install
npm set-script prepare "husky install"
# 上面那行执行完之后会在 package 添加 "prepare": "husky install",目前不知道干啥用的。
复制代码

运行完上面的命令,工程下面会出现一个 .husky 文件夹,里面就是 hook shell,可以查看 .git/config 文件,发现多了下面的第8行。

[core]
	bare = false
	repositoryformatversion = 0
	filemode = true
	ignorecase = true
	precomposeunicode = true
	logallrefupdates = true
	hooksPath = .husky
[remote "origin"]
	url = https://github.com/xxxxx.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
	remote = origin
	merge = refs/heads/master
[branch "v2.0.0"]
	remote = origin
	merge = refs/heads/v2.0.0
复制代码

创建 hook

npx husky add .husky/pre-commit "npm test"
复制代码

后面的 npm test 是钩子触发的时候,会运行的命令。 现在可以在工程下面的 .husky 文件架内多了一个 pre-commit 文件,内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test
复制代码

现在是不是对新版的 husky 使用有了相关的了解了。 接下来我们把 lint-staged、commitlint 加上

commitlint

工程目录下创建 commitlint.config.js

module.exports = {
  extends: [
    "@commitlint/config-angular"
  ]
};
复制代码

运行命令

npx husky add .husky/commit-msg "npm test"
复制代码

修改创建的 commit-msg 文件内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1
复制代码

关于之前的 HUSKY_GIT_PARAMS 已经用 $1 $2代替了。具体可以点击 HUSKY_GIT_PARAMS 查看

lint-staged

在工程目录下创建 .lintstagedrc.json 文件

{
  "src/**/*.{js,json,vue,ts,tsx}": [
    "eslint --fix"
  ]
}
复制代码

还记得我们最开始实验室创建的 pre-commit 文件吗?直接修改他,删掉 npm test

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged
复制代码

结束

看到这里,你的工程已经添加了对应的 git hook,如果还有问题,可以删除 .git/hooks/ 下面的 pre-commitcommit-msg 文件再试试。 新版的 husky 改动还是很大的,把之前钩子从 .git/hooks 移出来,专门放在了一个文件夹内,所以导致了旧项目升级了 husky ,钩子就不起作用了。

文章分类
前端