随着Web项目中用到的JavaScript越来越多,以及项目中参与人数的增加,保证JavaScript的代码质量尤为显得重要。一方面可以形成统一的代码风格,方便团队之间协作,另一方面也可以提高代码的可读性,方便以后的维护。
今天主要来介绍一下如何结合Git Hook, Gulp及JSHint来检测JavaScript代码,从而保证JavaScript的代码质量。
需要的环境及工具
配置JSHint
JSHint是一个用来检测JavaScript代码质量的工具,类似的还有ESLint, JSCS等。
首先需要全局安装JSHint:
npm install -g jshint
然后在项目根目录中添加.jshintrc
文件,添加你的配置项,如「驼峰命名」、「单引号」、「严格模式」等:
{
"node": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true
}
具体配置可以根据团队需要自行调整,更多配置项可以参考官网。
为了能够实时检测代码中的语法,可以给代码编辑器安装JSHint的插件,例如Sublime Text,可以安装SublimeLinter
及SublimeLinter-jshint
这两个插件。
配置Gulp Task
Gulp是一个自动化构建工具,可以自动执行一些常见的任务,如SASS编译、文件压缩、代码合并等,极大的提高了我们的工作效率,类似的工具还有Grunt。
首先需要全局安装Gulp:
npm install -g gulp
然后在项目中创建gulpfile.js
文件,添加task。接下来我们给JavaScript的检测添加一个task,并安装相关依赖。
所用到的NPM包:
{
// ...
"devDependencies": {
"gulp": "^3.9.0",
"gulp-jshint": "^2.0.0",
"gulp-load-plugins": "^1.2.0",
"jshint": "^2.9.1",
"jshint-stylish": "^2.1.0",
// ...
}
// ...
}
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
gulp.task('lint:js', function () {
return gulp.src([
'./static/js/**/*.js',
]).pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.jshint.reporter('fail'));
});
此时Gulp任务已经配置好了,可以先测试一下:
gulp lint:js
如果有JS文件不符合规范,则会给出提示信息。如果希望忽略某些JS文件,可以添加.jshintignore
配置文件,写法跟.gitignore
类似。
添加Git Hook
Git和其它版本控制工具类似,当某些重要的操作发生时,可以调用自定义的脚本,这些脚本可以称作是Hooks(钩子)。这里的JS代码检测可以用提交工作流钩子来处理。
在项目的根目录里会有.git
文件夹,然后找到放置hooks的位置:
.git/hooks
├── applypatch-msg.sample
├── commit-msg.sample
├── post-update.sample
├── pre-applypatch.sample
├── pre-commit.sample
├── pre-push.sample
├── pre-rebase.sample
├── prepare-commit-msg.sample
└── update.sample
这里放置了一些示例文件,其中我们用到的是pre-commit.sample
,我们把后缀.sample
去掉即可生效。然后添加脚本,使进行commit操作时,调用Gulp任务。
#!/bin/sh
if git diff --cached --name-only --diff-filter=ACM | grep '.js'
then
gulp lint:js
fi
exit $?
OK,一切都配置好了!此时,每当对JS文件进行commit操作时就会通过Git Hook调用Gulp任务,若JSHint检测通过,则commit操作成功,否则commit操作失败。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。