在團(tuán)隊(duì)開發(fā)中，無論是寫前端（js,css,html），還是后端，我們常常需要解決一個(gè)問題：如何統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格。這篇文章主要是使用pre-git , eslint , js-beautify 實(shí)現(xiàn)代碼風(fēng)格控制。

下面分別介紹這三個(gè)工具和使用方式：

pre-git

該工具能實(shí)現(xiàn)git hook的功能，在git的流程中插入一些自定義行為，例如commit之前執(zhí)行代碼檢測(cè)，如果不通過則報(bào)錯(cuò)。

eslint

代碼格式審核工具，可以隨意組合配置各種風(fēng)格，用于組成團(tuán)隊(duì)的代碼統(tǒng)一規(guī)范。

js-beautiful

js代碼整理、美化工具。

然后這三個(gè)工具互相配合就形成了以下效果：

1.項(xiàng)目組長(zhǎng)定義好eslint的代碼規(guī)范。

2.使用pre-git在commit之前運(yùn)行eslint代碼監(jiān)測(cè)和js-beautiful代碼美化

3.如果通過則自動(dòng)"git add ." ，最后允許push。

實(shí)現(xiàn)

一：npm安裝上述工具

$ npm install eslint js-beautify pre-git --save-dev

二：工具的配置

在根目錄新建.eslintrc.json文件，并且把規(guī)范配置好，一下給一個(gè)精簡(jiǎn)版：

注意：如需更多檢測(cè)，請(qǐng)到eslint官網(wǎng)查看

{
  "rules": {
    "comma-dangle": ["error", "never"],
    "arrow-body-style": ["warn", "always"],
    "no-const-assign": ["error"]
    },
  "parserOptions": {
    "ecmaVersion": 6
  }
}

因測(cè)試，bash 中使用js-beautiful遞歸多層文件的時(shí)候總出現(xiàn)錯(cuò)誤，所以由一腳本來進(jìn)行代碼美化：

beatufyjs.js

const fs = require( 'fs' );
const path = require( 'path' );
const child_process = require( 'child_process' );

for( let arg of process.argv.splice( 2 ) ) {
  let pathName = path.join( process.cwd(),arg );
  if( isFile( path.join( process.cwd(),arg ) ) ) {
    child_process.exec( `./node_modules/js-beautify/js/bin/js-beautify.js -P -E -j -a ${pathName} -r` , function( error, msg, stderr ) {
      console.log( msg.replace('\\\\n','') );
    } );
  } else {
    read_dir( pathName );
  }
}

function read_dir( dir ){
  let files = fs.readdirSync( dir );
  for( let file of files ) {
    let pathName = path.join( dir,file );
    if( isFile( pathName ) ) {
      child_process.exec( `./node_modules/js-beautify/js/bin/js-beautify.js -P -E -j -a ${pathName} -r` , function( error, msg, stderr ) {
        console.log( msg.replace( '\\\\n','') );
      } );
    } else {
      read_dir( pathName );
    }
  }
}

function isFile( path ){ 
  return exists( path ) && fs.statSync( path ).isFile(); 
} 

function exists( path ){ 
   return fs.existsSync( path ) || path.existsSync( path ); 
}

三：使用上述工具

在package.json文件中配置：

{
 "name": "demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "lint": "./node_modules/.bin/eslint routes runtime utils libs --quiet",
  "lint-fix": "./node_modules/.bin/eslint routes runtime utils libs --quiet --fix",
  "js-beautify": "node --harmony --use_strict ./bin/beatufyjs.js libs middlewares index.js "
 },
 "author": "kelvv",
 "license": "ISC",
 "config": {
  "pre-git": {
   "commit-msg": "",
   "pre-commit": [
    "npm run lint-fix",
    "npm run js-beautify",
    "git add ."
   ],
   "pre-push": [],
   "post-commit": [],
   "post-checkout": [],
   "post-merge": []
  }
 },
 "devDependencies": {
  "eslint": "^2.12.0",
  "js-beautify": "^1.6.3",
  "pre-git": "^3.9.1"
 }
}

此時(shí)當(dāng)你修改其中一個(gè)文件，然后"git add && git commit -m 'msg' "的時(shí)候，pre-commit中的三條命令就會(huì)執(zhí)行，如果中途有錯(cuò)就會(huì)停止提交，修改完畢后再繼續(xù)提交。

有一點(diǎn)需要注意的是，有的格式問題不足以報(bào)錯(cuò)的話，改方法會(huì)自動(dòng)修改優(yōu)化代碼，并且自動(dòng)添加修改，最后一步，執(zhí)行：git push即可！可以結(jié)合單元測(cè)試，更佳

總結(jié)

以上就是為大家整理的如何用Node.js自動(dòng)審核團(tuán)隊(duì)的代碼的全部?jī)?nèi)容，有需要的可以進(jìn)行參考學(xué)習(xí)。

您可能感興趣的文章: