如何使用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);
複製代碼

好的，結束！