利用GIT+ESLINT规范代码提交

利用GIT+ESLINT规范代码提交

eslint

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    //每行之前两个空格
    "indent":["error",2,{
      "SwitchCase":1
    }],
    //单引号
    "quotes":["error","single"],
    //每行之后无分号
    "semi":[2,"never"],
      //驼峰式命名
    'camelcase':2,
    //方法括号前必须有空格
    "space-before-function-paren": ["error", "always"]
  }
}

以上是一个eslint文件，限定的规则主要在rules中进行配置，相关配置可以在eslint官网进行查询，目前用到的是

• 规范使用单引号
• 每行之后限定不用分号
• 限定代码之前的空格宽度
• 限定使用驼峰式命名
• 方法括号前必须有空格

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"
    ]
  }
}
12345678910111213

我们再测试一下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)
123456789101112131415161718192021222324

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

遇到的问题

• 在npm安装husky前必须有先git init不然就会导致git钩子函数不生效
• 只安装husky的话会导致未提交文件检查导致提交麻烦