那些年我们一起追的，husky、lint-staged

背景：公司项目已经安装了eslint依赖， 所以在vscode编辑器安装eslint插件之后，编写代码的时候会自动格式化代码，
考虑到后来的人可能编辑器没安装相关插件， 代码依然可以提交，为了强制团队代码规范，决定在git commit之前（pre-commit）做代码格式规范校验

git在初始化的时候，会提供一些钩子(默认是不启用的)示例供用户调用，在.git/hooks目录下, 如下

MacBook-Pro:koa-mp-search user$ cd .git/hooks/
MacBook-Pro:hooks user$ ls
applypatch-msg.sample           post-update.sample              pre-push.sample                 prepare-commit-msg.sample
commit-msg.sample               pre-applypatch.sample           pre-rebase.sample               update.sample
fsmonitor-watchman.sample       pre-commit.sample               pre-receive.sample

这些钩子默认都是sh脚本， .sample后缀的钩子是默认不启用的， 如果想启用去掉.sample即可 ；

难道让我去手撸pre-commit，


.git/hooks作为隐藏目录&&不被git提交，当然不去手动修改啦,

husky(突然想起亚索的 哈撒黑)

husky（面对疾风吧）

github

Install

npm install husky -D --registry=https://registry.npm.taobao.org/

husky在安装的过程中会在.git/hooks目录下生成一系列的git hook

注意：留意husky的安装信息， 是否为你安装了git hook
正确示例如下:

安装成功之后在看.git/hooks

MacBook-Pro:hooks user$ ls
applypatch-msg                  post-checkout                   pre-auto-gc                     pre-receive.sample
applypatch-msg.sample           post-commit                     pre-commit                      prepare-commit-msg
commit-msg                      post-merge                      pre-commit.sample               prepare-commit-msg.sample
commit-msg.sample               post-rewrite                    pre-merge-commit                push-to-checkout
fsmonitor-watchman.sample       post-update                     pre-push                        sendemail-validate
husky.local.sh                  post-update.sample              pre-push.sample                 update.sample
husky.sh                        pre-applypatch                  pre-rebase
post-applypatch                 pre-applypatch.sample           pre-rebase.sample
MacBook-Pro:hooks user$ 

package.json配置

因为我只在commit之前做一些代码校验，所以只用到了pre-commit钩子

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // your cmd
    }
  }
}

这里在pre-commit钩子调用了lint-staged命令，你也可以写其他的命令比如echo 1、npm run test

执行多个命令

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "echo wangnima && echo handsome" // your cmd
    }
  }
}

• 或者可以在根目录下配置.huskyrc.js，用数组的方式执行多个命令

const tasks = arr => arr.join(' && ')

module.exports = {
  hooks: {
    'pre-commit': arr([
      'echo wangnima',
      'npm run test'
    ])
  }
}

hook拦截

pre-commit脚本退出代码为0则不会阻断git commit行为，非0则阻断; 当然，husky不止可以在commit上搞事情，push等操作都可以

lint-staged 暂存区搞事情

github

Install

npm i -D lint-staged

一些参数如下

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "components/**/*.{js,vue}": [
      "eslint --fix"
    ]
  }
}

在代码提交之前，将暂存区的文件进行一次美化

个人遇到一个不是问题的问题，分享

文件原来是单引号，我为了测试改成双引号

commit报这个错误，

蒙了一会之后，oh，原来是lint-staged美化之后的文件和之前的文件相同，所以报这个错

总结

1.husky还是写入了.git/hooks自定义的脚本，需要注意的是安装husky时候， git hook是否安装成功
2. lint-staged的安装与使用，

参考

• 使用husky + lint-staged助力团队编码规范