husky
是一个为 git 客户端增长 hook 的工具。安装后,它会自动在仓库中的 .git/
目录下增长相应的钩子;好比 pre-commit
钩子就会在你执行 git commit
的触发。html
那么咱们能够在 pre-commit
中实现一些好比 lint 检查、单元测试、代码美化等操做。固然,pre-commit
阶段执行的命令固然要保证其速度不要太慢,每次 commit 都等好久也不是什么好的体验。vue
lint-staged
,一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具;这个很实用,由于咱们若是对整个项目的代码作一个检查,可能耗时很长,若是是老项目,要对以前的代码作一个代码规范检查并修改的话,这可能就麻烦了呀,可能致使项目改动很大。node
因此这个 lint-staged
,对团队项目和开源项目来讲,是一个很好的工具,它是对我的要提交的代码的一个规范和约束。git
Git Hooks 就是在 Git 执行特定事件(如commit、push、receive等)时触发运行的脚本,相似于“钩子函数”,没有设置可执行的钩子将被忽略。github
在项目的 .git/hooks
目录中,有一些 .sample
结尾的钩子示例脚本,若是想启用对应的钩子,只需手动删除后缀,便可。(删除某一个 hook 的后缀 .sample
便可启用该 hook 脚本,默认是不启用的。)npm
【可是,咱们通常不去改动 .git/hooks
里面的文件,由于咱们使用 husky 工具来完成这个操做】json
npm i husky -D --registry=https://registry.npm.taobao.org
复制代码
husky 在安装过程当中会在 .git/hooks
文件夹中生成一系列的 git hook
脚本。api
须要注意的是:你要留意 husky 的安装信息,是否为你安装了
git
钩子。数组
若是安装正确的话,能够看到 husky 会打印出以下消息:bash
> node husky install
husky > setting up git hooks
husky > done
复制代码
但也有可能:
这个就是因为电脑 node
版本的缘由,跳过了 Git 钩子安装,至关因而没有安装成功哦~
OK,假设你的 husky
安装是正常的,那么 husky 为你安装的 hooks 将会生效。这样咱们在 git commit
的时候会触发 pre-commit
钩子从而触发到 huksy。
咱们在 package.json
文件中配置 husky 的钩子须要执行的 命令 或 操做。
"husky": {
"hooks": {
"pre-commit": "echo \"git commit trigger husky pre-commit hook\" "
}
}
复制代码
这样,在 git commit
的时候就会看到 pre-commit
执行了。
从 1.0.0 开始,husky 的配置可使用 .huskyrc
、.huskyrc.json
、.huskyrc.js
或 husky.config.js
文件
"husky": {
"hooks": {
"pre-commit": "echo \"git commit trigger husky pre-commit hook\" && npm run test"
}
}
复制代码
.huskyrc.js
中定义它们const tasks = arr => arr.join(' && ')
module.exports = {
'hooks': {
'pre-commit': tasks([
'npm run lint',
'npm run test'
])
}
}
复制代码
为了阻止提交,pre-commit
脚本必须以非零的退出代码退出。
若是您的提交未被阻止,请检查脚本退出代码。
固然 husky 不止能验证 commit
,也能够进行 push
等其余操做验证,这里就不一一举例了,具体能够参照 npm husky 。
lint-staged
是一个在 git 暂存文件上(也就是被 git add
的文件)运行已配置的 linter(或其余)任务。lint-staged
老是将全部暂存文件的列表传递给任务。
// package.json
"lint-staged": {
"src/**/*.{js,vue}": [
"prettier --write",
"eslint --cache --fix",
"git add"
]
}
复制代码
这里 lint-staged
的配置是:在 git 的待提交的文件中,在 src 目录下的全部 .js
.vue
都要执行三条命令。前两条一下子说,后一条是将处理过的代码从新 add 到 git 中。
结合咱们前面介绍的 husky,配合 husky 的 pre-commit 钩子,将会造成一个自动化工具链。
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": ["prettier --write", "eslint --cache --fix", "git add"]
}
复制代码
在 commit 以前,将暂存区的内容作一次 代码检查 和 代码美化,而后再添加到暂存区;而后再 commit,完美!!
从 v3.1 开始,您如今可使用不一样的方式进行 lint-staged 配置:
mrm 是一个自动化工具。推荐
它将根据 package.json
依赖项中的代码质量工具来安装和配置 husky 和 lint-staged,所以请确保在此以前安装并配置全部代码质量工具,如 Prettier 和 ESlint
安装 mrm 并执行 lint-staged 任务:
npm i mrm -D --registry=https://registry.npm.taobao.org
npx mrm lint-staged
复制代码
此时,将会自动给你安装相关依赖工具,以及相关配置文件。
prettier 是一个很好的格式化代码的插件,但对已经有必定迭代完成度的代码不推荐使用。使用该插件后,它会将原有的代码也进行格式化,形成不少不可知的问题,我就是前车可鉴,使用 prettier 后,本来已经没有 eslint 问题的代码,又多出了更多的不知道什么缘由的报错,只能将代码回退处理。
因此,这也就是咱们为何在 lint-staged
中,执行 prettier
的缘由。