如何使用git的hook来验证代码规范

首先

• 需要知道基本的git使用
• 知道eslint是什么鬼
  • ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

开始表演

1.需要一份eslint配置文件(.eslintrc.js)

下面使我们的公司的规范

module.exports = {
root: true,
extends: "eslint:recommended",
parserOptions: {
sourceType: "module",
ecmaVersion: 7
},
env: {
browser: true,
es6: true
},
plugins: [
"html"
],
parser: "babel-eslint",
rules: {
"indent": ["error", "tab",{"SwitchCase": 1}],
"quotes": ["error", "single", { "allowTemplateLiterals": true }],
"semi": ["error", "always",{ "omitLastInOneLineBlock": true }],
"no-console": ["error",{allow:["log","warn"]}],
"arrow-parens": 0,
"no-news":0,
"no-case-declarations":0,
"no-var":2,
"no-empty-function":2,
"no-debugger":0,
"max-params": ["error", 3]
}
}
复制代码

更详细的

2.谈谈git的钩子是啥

• git钩子(可自定义)

  钩子都被存储在Git目录下的hooks目录中
  
  cd .git/hooks && ls
  
  这些钩子的功能主要分为提交工作流钩子、电子邮件工作流钩子和其它钩子。比如提交代码之前检查，提交给同组开发人员发邮件等等。

我们这里只做对代码风格的校验

会用到钩子是pre-commit,这个钩子会在我们提交代码到本地仓是进行验证
此时我们只需要在项目的根目录 .git/hooks 下 新建文件pre-commit即可
但是默认情况下 钩子用的是bash命令 #!/bin/sh
但是灵活度肯定不如我们直接写node来的快 ,此时的我们只需要把文件的首行改为 #!/usr/env/node
复制代码

文件内容如下

#!/usr/env/node
'use strict';
let exec = require('child_process').exec;
//为node调用git命令行做准备
let path = require("path");
let config = require(path.resolve(".eslintrc.js"));//加载你的eslint配置文件,注意是是放在项目的根目录下
let CLIEngine = require("eslint").CLIEngine;//使用官方提供的eslint的API
//API参考地址： https://eslint.org/docs/developer-guide/nodejs-api
let cli = new CLIEngine(config);
//存储不满足eslint的信息
let errCached = {};
//执行git命令的获取修改的文件(注意参数是--cached或者--staged,不要用HEAD,这个会把别人不想提交的也会检测很麻烦)
exec('git diff --cached --name-only --diff-filter=ACMR -- src/',(error, stdout, stderr) => {
// stdout 是以换行分割的包含改动文件的路径的字符串
//获取到修改的文件
if(stdout.length){
let allFile = stdout.split("n");
//只需要检测我们需要的类型
allFile = allFile.filter((item)=>{
return /.(js|vue)$/g.test(item);
})
//allFile 是所有的改动文件路径的数组
let report = cli.executeOnFiles(allFile);
复制代码

这个report返回的是这个格式的数组

{
results: [
//N条检测结果的集合，数组中的每一个对象都是检测的每个文件的详细报告
{
filePath: "/Users/eslint/project/myfile.js",
messages: [
{
ruleId: "semi",
severity: 2,
message: "Missing semicolon.",
line: 1,
column: 13,
nodeType: "ExpressionStatement",
fix: { range: [12, 12], text: ";" }
}
],
errorCount: 1,
warningCount: 0,
fixableErrorCount: 1,
fixableWarningCount: 0,
source: ""use strict"n"
}
],
//下面这几个是对所有的检测报告做的汇总比如说报错多少个，警告多少个之类的
errorCount: 1,
warningCount: 0,
fixableErrorCount: 1,
fixableWarningCount: 0
}
复制代码

拿到上述结果，我们可以在下面做一些的简单的逻辑判断以及一些提示语言

//简单做些计算和统计
if(Number(report.errorCount) > 0 || Number(report.warningCount) > 0){
for(let item of report.results){
let temp = errCached[item.filePath] = [];
if( Number(item.errorCount) > 0 || Number(item.warningCount) > 0){
for(let errMsg of item.messages){
temp.push({
ruleId:errMsg.ruleId,
message:errMsg.message,
line:errMsg.line,
column:errMsg.column
})
}
}
}
//梳理输出结果
console.log("以下文件存在问题(不满足eslint规范)n");
let num = 1;
for(let str in errCached){
let temp = errCached[str];
if(temp.length > 0){
console.log(`${num++}=>${str}n`);
let index = 0;
for(let item of temp){
console.log(`t${++index}.错误为:${item.message},行:${item.line},列:${item.column},错误规则:${item.ruleId}`);
}
}
}
if( num > 1){
console.log('n错误太多,建议你把config下的webpack.dev.conf.js的所属自己的板块的eslint验证打开');
process.exit(1);
}
else{
console.log("牛逼验证通过了，可以上传");
process.exit(0);
}
}else{
console.log("牛逼验证通过了，可以上传");
process.exit(0);
}
}else{
console.log("牛逼验证通过了，可以上传")
process.exit(0);
}
if (error !== null) {
console.log('exec error: ' + error);
process.exit(1);
}
});
复制代码

怎么区分检测是否通过或者不通过呢
国际统一标准，退出值为!0的情况下为失败 返回为0 则为成功

process.exit(1);
复制代码

好的，结束！