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 相关文章推荐
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
JavaScript函数模式详解
Nov 07 Javascript
javascript事件冒泡实例分析
May 13 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
javascript操作向表格中动态加载数据
Aug 27 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
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python分析apache访问日志脚本分享
2015/02/26 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
药学专业学生的自我评价分享
2014/02/06 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
导游词之西安骊山
2019/12/20 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
MySQL transaction事务安全示例讲解
2022/06/21 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers