husky+lint-staged 助力前端代码规范 - 掘金

husky是什么？用来作什么的？

• husky是一个为 git 客户端增加 hook 的工具，githooks - git使用的工具 (githook在官网的介绍)，比如 pre-commit 钩子就会在你执行 git commit 的触发。
• 由于钩子可以在git commit中触发，所以我们可以在提交到暂缓区时，做一些lint 检查、单元测试、代码美化等操作。

lint-staged是什么？

• 一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具
• 对个人要提交的代码的一个规范和约束
• 是一个在 git 暂存文件上（也就是被 git add 的文件）运行已配置的 linter（或其他）任务。lint-staged 总是将所有暂存文件的列表传递给任务。

使用方法

• husky的安装

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

  husky在安装的过程会在.git/hooks中生成一系列的脚本

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

  这版本，基本安装不会出错的

  如果安装成功的话，会出现下列信息

  > node husky install
  husky > setting up git hooks  
  husky > done
  

  ok，我们现在假设安装成功了，那么husky为你安装的hooks将会生效。

  这样我们就可以在git commit的时候去调用pre-commit钩子的方法，去触发到husky。

  接着我们还需要在package.json文件中做一些配置，配置husky的钩子需要执行的命令

  "husky": {
    "hooks": {
      "pre-commit": "echo 'git commit trigger husky pre-commit hook' "
    }
  }
  

  这个命令会在我们git commit的时候，会打印出git commit trigger husky pre-commit hook，这说明我们看到了pre-commit执行了

  更多hooks的钩子方法可以点击这里查看

• lint-staged的安装

  npm i lint-staged prettier -D --registry=https://registry.npm.taobao.org
  

  安装好依赖之后，在package.json文件中做配置

    "lint-staged": {
      "src/**/*.{js,vue}": [
        "prettier --write",
        "eslint --fix",
        "git add"
      ]
    },
  

  这里 lint-staged 的配置是：在 git 的待提交的文件中，在 src 目录下的所有 .js .vue 都要执行三条命令。

  1. 第一条命令是将代码进行格式化，用prettier这个代码格式化插件进行代码格式化。
  2. 第二条命令是将格式化的代码上有eslint问题，进行修复。
  3. 第三条命令是将处理过的代码重新 add 到 git 中。

这样就将代码进行了规范化，当然业务逻辑那些还需要开发者在里面增加注释了