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 相关文章推荐
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
JavaScript实现显示和隐藏图片
Apr 29 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 JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
php简单压缩css样式示例
2016/09/22 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
为输入框加入数字js校验代码分享
2017/11/02 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
pytorch forward两个参数实例
2020/01/17 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
视图的作用
2014/12/19 面试题
服装设计师求职信
2014/06/04 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
员工工作能力评语
2014/12/31 职场文书
教师培训学习心得体会
2016/01/21 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript