使用Git Hooks约束Vue代码提交

每个前端项目都有属于自己的代码规范，然而有些人在开发时忽略对规范的重视，导致提交代码出现很多Warning甚至Error。使用Git Hook可以较好的避免这类问题发生。

Git 能在特定的重要动作发生时触发自定义脚本。Git钩子有很多，本文只用到pre-commit`提交前的回调。

husky

如果项目不是通过vue-cli@3及以上脚手架构建，可以使用husky或pre-commit向项目添加git hooks，实现在本地提交代码之前做一次lint校验。

首先安装husky

npm install -D husky

然后修改package.json，增加配置：

"husky": {
    "hooks": {
        "pre-commit": "eslint --ext .js,.vue src"
    }
}

但是这样会有一个问题，在提交代码时，只修改了一个文件，但依然会校验src下所有.js、.vue文件，随着项目代码数量增加，检查速度会越来越慢，并且，有些时候，并不想解决别人的代码格式问题。因此，需要使用lint-staged。

lint-staged

使用到lint-staged工具来识别被加入到stage区文件,就是每次只对当前修改后的文件进行扫描，即只对git add加入到stage区的文件进行扫描即可，完成对增量代码进行检查。

首先安装lint-staged

npm i -D lint-staged

其次修改package.json，增加list-staged配置

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
        "vue-cli-service lint",
        "git add"
    ]
}

yorkie

如果创建项目时使用的是vue-cli@3及以上版本脚手架，可以使用内置的yorkie，在package.json的gitHooks字段中方便地指定Git Hook.

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
   "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

注：yorkie是基于husky做了改动，但两者不兼容。