如何使用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);
复制代码

好的，结束！