Vue项目中如何禁止不规范的代码提交Git

首先，如果要检验vue代码，我们需要安装eslint、vue-eslint-parser和eslint-plugin-vue，安装这三个包之后，我们就可以配置自己的代码规范，并使用ESLint来校验我们项目中的代码了。如果需要我们还可以通过安装VSCode的ESLint插件和通过VSCode的一些配置来实现编码过程中实时提示警告跟错误，并且在保存代码的时候自动修复部分错误

接着上面的说，虽然有部分错误ESLint能够帮我们自动修复，但是ESLint不是万能的，有些警告跟错误还是需要我们自己亲自去修复。那么问题来了，有的小伙伴并没有修复这些就提交了Git，导致后来更新代码的小伙伴在运行项目的过程中控制台报一排排的警告…

我们今天就来研究下如何在Vue项目中禁止不规范的代码提交Git

Husky

Huskey就是Git的生命周期工具，在安装它之后，它能够自动的在项目的.git目录下增加相应的钩子，让你可以监听到Git的各个生命周期，并且配置对应的的shell命令

我们通过这个工具来监听Git的commit动作，让ESLinit在commit之前自动检查一下我们的代码

安装Husky

npm install husky --save-dev

配置Husky

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "eslint src/**/*{.js,.vue}"
    }
  }
}

配置好后，我们试一下，故意提交一个有规范问题的vue文件，控制台输出：

> eslint src/**/*{.js,.vue}


D:\nodeParam\vue-element-demo\src\components\HelloWorld.vue
  39:3  error  Expected to return a value in render function  vue/require-render-return

D:\nodeParam\vue-element-demo\src\components\kkm.js
  1:5  error  'kkm' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-demo@0.1.0 eslint: `eslint src/**/*{.js,.vue}`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-demo@0.1.0 eslint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2020-08-05T11_16_34_010Z-debug.log
husky > pre-commit hook failed (add --no-verify to bypass)

可见提交前自动校验了代码，而且报错后没有commit上去。这么操作后貌似实现了提交前校验代码的能力，但是它校验的是项目中的所有代码。如上例所示，我仅仅将HelloWorld.vue添加到了暂存区，但是它仍然校验了我未add的kkm.js。如果我们提交的代码没有规范问题，但是某个未add的代码有格式问题，它也是会报错导致提交不上去的。我们如何做到只校验我们即将commit的代码呢

lint-staged

如它的名称一样，lint-stated就是针对Git暂存区的文件做校验的一个工具。由于在commit之前，我们要提交的文件是在暂存区的，我们可以利用这个工具来校验我们即将commit的文件，而不会校验其它的文件

安装lint-staged

npm install lint-staged --save-dev

配置Husky和lint-staged

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint"
    ]
  }
}

我们再测试一下commit，控制台输出如下：

husky > pre-commit (node v10.15.3)
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *.vue
[STARTED] eslint
[FAILED] eslint [FAILED]
[FAILED] eslint [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...

× eslint:

D:\nodeParam\vue-element-demo\src\components\HelloWorld.vue
  39:3  error  Expected to return a value in render function  vue/require-render-return

✖ 1 problem (1 error, 0 warnings)

husky > pre-commit hook failed (add --no-verify to bypass)

可见，它只校验了暂存区的HelloWorld.vue文件，这正是我们想要的效果。

默认情况下ESLint的校验，只有error才触发退出码，即无论你代码中有多少个警告，都是不会触发退出的，这就导致一个问题就是当你代码中有警告的时候也是可以顺利commit的。在实际项目中，假如我们不希望带有warn的代码提交到Git上，我们该怎么配置呢？

eslint命令有个option，官方是这么解释的：

--max-warnings Int             Number of warnings to trigger nonzero exit code - default: -1

通过这个配置，我们可以设置ESLint触发退出的warn的个数，我们将这个值设置为0，那么只要暂存区的代码有warn就会触发退出了，修改后package.json如下：

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --max-warnings 0"
    ]
  }
}

lint-stated可以进一步对暂存区的代码进行限制，比如配置"src/**/*.{js,vue}"就可以进度暂存区中的src目录下的js和vue文件做校验，忽略其他目录下的文件

yorkie

除了Husky，使用vue-cli创建的项目还可以用yorkie来添加Git钩子，具体用法可以见官方文档：https://cli.vuejs.org/zh/guide/cli-service.html#git-hook