写在前面

husky 是一个为 git 客户端增长 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增长相应的钩子；好比 pre-commit 钩子就会在你执行 git commit 的触发。前端

那么咱们能够在 pre-commit 中实现一些好比 lint 检查、单元测试、代码美化等操做。固然，pre-commit 阶段执行的命令固然要保证其速度不要太慢，每次 commit 都等好久也不是什么好的体验。vue

lint-staged，一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，由于咱们若是对整个项目的代码作一个检查，可能耗时很长，若是是老项目，要对以前的代码作一个代码规范检查并修改的话，这可能就麻烦了呀，可能致使项目改动很大。node

因此这个 lint-staged，对团队项目和开源项目来讲，是一个很好的工具，它是对我的要提交的代码的一个规范和约束。git

了解 githooks

Git Hooks 就是在 Git 执行特定事件（如commit、push、receive等）时触发运行的脚本，相似于“钩子函数”，没有设置可执行的钩子将被忽略。github

在项目的 .git/hooks 目录中，有一些 .sample 结尾的钩子示例脚本，若是想启用对应的钩子，只需手动删除后缀，便可。（删除某一个 hook 的后缀 .sample 便可启用该 hook 脚本，默认是不启用的。）web

【可是，咱们通常不去改动 .git/hooks 里面的文件，由于咱们使用 husky 】npm

husky

• husky 的安装

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

husky 在安装过程当中会在 .git/hooks 文件夹中生成一系列的 git hook 脚本。json

须要注意的是：你要留意 husky 的安装信息，是否为你安装了 git 钩子。api

若是安装正确的话，能够看到 husky 会打印出以下消息：数组

> 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 文件

钩子中执行多个命令

• 根据 npm script 的规则，使用 &&

"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'
    ])
  }
}

hook 拦截

为了阻止提交，pre-commit 脚本必须以非零的退出代码退出。

若是您的提交未被阻止，请检查脚本退出代码。

固然 husky 不止能验证 commit ，也能够进行 push 等其余操做验证，这里就不一一举例了，具体能够参照 npm husky 。

lint-staged

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 配置：

• lint-staged 在你的对象 package.json
• .lintstagedrc JSON或YML格式的文件
• lint-staged.config.js JS格式的文件
• 使用 --config 或 -c 标志传递配置文件

mrm

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

此时，将会自动给你安装相关依赖工具，以及相关配置文件。

mrm 文档、mrm api doc

关于 prettier 的问题

prettier 是一个很好的格式化代码的插件，但对已经有必定迭代完成度的代码不推荐使用。使用该插件后，它会将原有的代码也进行格式化，形成不少不可知的问题，我就是前车可鉴，使用 prettier 后，本来已经没有 eslint 问题的代码，又多出了更多的不知道什么缘由的报错，只能将代码回退处理。

因此，这也就是咱们为何在 lint-staged 中，执行 prettier 的缘由。

-----------------(正文完)------------------

前端学习交流群，想进来面基的，能够加群：

或者手动search群号：685486827，832485817；

个人：
我的网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注个人新浪微博…