世界，你好！

Appearance

Husky前端配套 ​

前端代码各自规范化的Git Flow操作神器Husky和其配套

Husky ​

在使用Git管理代码的过程中会触发各种hook, 如commit时会触发pre-commit, commit-msg, 在执行操作前会先执行hook, 只有hook成功才会真正的执行具体操作，如果hook执行失败，不会有后续的。在每个Git库的.git目录下有个hooks目录，存有常用hook的样例。这些样例是不会被执行的，如果需要执行样例中的哪个hook, 如commit-msg.sample, 需要把.sample去掉，然后需要 .git目录下的config文件下配置[core] hooksPath = hooks， hooksPath的值是一个存在各种hook目录。实际上初始化Git仓库时，.git目录下的config是没有hooksPath的，Husky就是把hooksPath的值改成.husky，然后再把种Git的hook存放在.husky目录下。

安装Husky ​

  • 安装依赖

npm install husky --save-dev

  • 安装Git hooks

npx husky install

  • 保证在执行install时可以有 git hooks

npm set-script prepare "husky install" 也可以手动添加 "prepare": "husky install" 到package.json文件 的scripts里

prepare是npm的一个hook，在npm install后执行prepare

json
"scripts": {
    "prepare": "husky install"
  },

使用Husky ​

在执行npx husky install 后，生成了一个.husky目录，并在当前.git目录下的config文件添加了一行hooksPath = .husky，看到当前目录.husky并没有任何Git的hook。

添加一个hook

npx husky add .husky/pre-commit "npm test"

可以看到多一个文件pre-commit 当git commit 时会先执行pre-commit，如果pre-commit不中断会commit成功，反之则commit失败 更多用法参数手册 接入来看下和这神器相关的工具

Commmitlint ​

Commmitlint是一个用于规范Git提交代码时的commit信息的工具，如果编写的commit信息不符合规范会提交失败。 其原理是这样子的，把提交的信息分成三部分,header, body, footer，其中header又分成<type>(<scope>): <subject>, 然后把提交的信息对应每部分进行检查，不符合定义规则的信息就会报错。

bash
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

安装Commmitlint ​

  • 依赖

npm i "@commitlint/config-conventional" -D npm i "@commitlint/cli" -D

  • 添加commit-msg

这个是对commit提交信息规范的，所以使用husky 添加一个commit-msg并添加Commmitlint命令

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

配置Commmitlint ​

创建配置文件

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

这个配置文件其实和其他的检查工具定义差不多的，如eslint，这里使用的信息规范是@commitlint/config-conventional, 也可以去使用其他的配置或者自定义。

bash
# 使用@commitlint/config-conventional type和subject是必须的，其他都可选
type只能'build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test',

git commit -m "test" # error
git commit -m "feat:" # error
git commit -m "feat: msg" # ok
git commit -m "feat(comps): msg" # ok

参考：

lint-staged ​

Husky配合Git，可以在提交代码前做很多事情，比如提交前强制检查Eslint和Stylelint，如果报错不给提交，这对规范代码有很强约束力。但如果是老项目且Eslint没有修改完全，这时候强制检查Eslint去修改，这是不可能的。又或者是只改几行代码，提交要对整个项目检查，这也太浪费了。这时就可以使用lint-staged。 这个插件主要是获取git staged里面的文件，然后把这些文件交给定义的命令执行，如果通过则提交成功，反之提交失败。也就是说，只对要提交的文件进行检查，没有修改过的文件不作检查，这个插件就是根据git的命令过滤出来哪些文件被修改了，然后交给配置做处理。

  • 安装

npm i lint-staged -D

  • hook配置 这个插件放在pre-commit，添加npx --no-install lint-staged
bash
# pre-commit 文件
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged
  • 配置

这个配置在package.json 里加一个属性lint-staged，也可以单独写一个文件，最终就是一个简单的对象

javascript
{
  "*.{js,vue}": ["eslint"],
  "*.{css,less,scss}": ["stylelint"]
}

对象的属性符合glob要匹配的文件, 值可以是数组也可以是字符串，就是要执行的命令

参考：

最后 ​

对于提交代码需要做哪些规范，每个项目都不太一样，但是对于前端来说，如果使用Git管理代码的话，Husky是少不了的，如果规范做的好，配合很多其他的工具使用可以很大程度上提升项目代码质量。