Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
简介
在团队开发中,无论是写前端(js,css,html) ,还是后端 ,我们需要解决一个问题:如何统一团队代码风格。 这篇文章主要是使用pre-git , eslint , js-beautify 实现代码风格控制。
下面分别介绍这三个工具和使用方式:
-
pre-git 该工具能实现git hook的功能,在git的流程中插入一些自定义行为,例如commit之前执行代码检测,如果不通过则报错。
-
eslint 代码格式审核工具,可以随意组合配置各种风格,用于组成团队的代码统一规范。
-
js-beautiful js代码整理、美化工具。
然后这三个工具互相配合就形成了以下效果:
- 项目组长定义好eslint的代码规范。
- 使用pre-git在commit之前运行eslint代码监测和js-beautiful代码美化
- 如果通过则自动"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即可!
可以结合单元测试,更佳
zui后:感谢阅读,本人github , 我是kelvv
感谢大神分享
顶一下
js-beautify 可以被 require, 使用程序来 beautify 的, 还有它的模式太死, 不如 esformatter, 但是 esformatter 好多bug… 还是等 babel-formatter 不知道有没有
@magicdawn js-beautify是可以被require,但是打印的话应该要自己添加了,用命令行省事 ,js-beautify主要还是处理一些空格问题、换行问题的自动修复,esformatter没用过,了解下先,😄
mark