Node.js如何自动审核团队的代码


Posted in Javascript onJuly 20, 2016

前言

在团队开发中,无论是写前端(js,css,html) ,还是后端 ,我们常常需要解决一个问题:如何统一团队代码风格。 这篇文章主要是使用pre-git , eslint , js-beautify 实现代码风格控制。

下面分别介绍这三个工具和使用方式:

pre-git

该工具能实现git hook的功能,在git的流程中插入一些自定义行为,例如commit之前执行代码检测,如果不通过则报错。

eslint

代码格式审核工具,可以随意组合配置各种风格,用于组成团队的代码统一规范。

js-beautiful

js代码整理、美化工具。

然后这三个工具互相配合就形成了以下效果:

1.项目组长定义好eslint的代码规范。

2.使用pre-git在commit之前运行eslint代码监测和js-beautiful代码美化

3.如果通过则自动"git add ." ,最后允许push。

实现

一:npm安装上述工具

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

二:工具的配置

在根目录新建.eslintrc.json文件,并且把规范配置好,一下给一个精简版:

注意:如需更多检测,请到eslint官网查看

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

因测试,bash 中使用js-beautiful递归多层文件的时候总出现错误,所以由一脚本来进行代码美化:

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

此时当你修改其中一个文件,然后"git add && git commit -m 'msg' "的时候,pre-commit中的三条命令就会执行,如果中途有错就会停止提交,修改完毕后再继续提交。

有一点需要注意的是,有的格式问题不足以报错的话,改方法会自动修改优化代码,并且自动添加修改,最后一步,执行:git push即可!可以结合单元测试,更佳

总结

以上就是为大家整理的如何用Node.js自动审核团队的代码的全部内容,有需要的可以进行参考学习。

Javascript 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
js只执行1次的函数示例
Jul 20 #Javascript
JQuery为元素添加样式的实现方法
Jul 20 #Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 #Javascript
javaScript给元素添加多个class的简单实现
Jul 20 #Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 #Javascript
JavaScript DOM 对象深入了解
Jul 20 #Javascript
JavaScript中的splice方法用法详解
Jul 20 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python中的pprint折腾记
2015/01/21 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python实现石头剪刀布程序
2021/01/20 Python
详解Python:面向对象编程
2019/04/10 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
《鲸》教学反思
2016/02/23 职场文书
JS的深浅复制详细
2021/10/16 Javascript
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python