[husky][lint-staged] 前端项目中添加husky

前置说明 git hooks：
git hooks是git在触发事件（例如：commit、push、receive）之前或之后执行的一组脚本，git hooks是git内置的功能，当在项目中使用 git init初始化git时就会自动添加git hooks，我们可以在/.git/hooks文件夹下找到每个git hooks事件的示例文件。

需要注意的是，git hooks不受版本控制(意思是这些文件不会提交到git仓库中，我们添加到/.git/hooks文件夹中的文件只会在本地)

还有问题是，当团队成员克隆仓库时不会自动将我们自定义的git hooks下载到本地，我们又如何确保每个团队成员都执行hooks？解决这个问题的办法就是使用husky

前置说明 husky
husky可以让我们向项目中方便添加git hooks，只需要在husky提供的配置文件中添加想要执行的命令(如precommit时运行ESLint)。

前置说明 lint-staged
我们不希望每次都对全量文件执行lint操作，显然对每个提交中包含的文件进行lint是一个合适的操作，这时我们就需要lint-staged。
lint-staged 是一个在 git 暂存文件上（也就是被 git add 的文件）运行已配置的任务的依赖项。lint-staged 总是将所有暂存文件的列表传递给待执行任务。

下面以vue2项目为例，说明如何添加husky、lint-staged

1、安装依赖项
npm i husky lint-staged -D

2、在scripts中添加一条

"precommit": "lint-staged"

3、在package.json的第一层级添加如下配置
{
"husky": {

"hooks": {
        "pre-commit": "npm run precommit"
    }
},
"lint-staged": {
    "*.{js,jsx,vue,html}": [
        "eslint"
    ]
  }

}

"pre-commit": 是 Git 的预提交钩子，它会在代码提交前触发。在这里，我们指定运行命令 "npm run precommit"，即在提交前会执行 precommit 脚本。

在提交代码前，使用 husky 钩子触发 pre-commit 钩子，该钩子又运行了一个 npm 脚本 precommit，而 precommit 脚本指向lint-staged，再对staged状态的 .js、.jsx、.vue 和 .html 文件进行 eslint 检查。

之后可以配合上一篇文章 《[ESLint] 项目中添加eslint及eslint配置》做一些自定义的eslint配置。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/cqvnt2vblmzpw06p