JSHint: 规范团队的JavaScript代码

历史

2008年,DouglasCrockford大神写完《JavaScript:TheGoodParts》http://book.douban.com/subject/11874748/之后,给JavaScript树立了一个完整的技术规范,算是给JavaScript正名了(设计还是可以的,关键是要用好)。然后他老人家心想说:“老子告诉你们什么是好的JavaScript了,再送你们一个检测工具吧,凡是过不了我规范就不是好的JavaScript代码,Warning:JSLintwillhurtyourfeelings”。当然除了最后Warning那句,其它都是我YY的。总之,就是老头根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint(http://www.jslint.com/),后来非常流行,也的确帮助了广大的JavaScript程序员。但是因为这老头的个性既霸道又固执(很多大神貌似都这样子...),对于自己的代码规范不做丝毫的妥协,对开源社区的反馈的回应也很不礼貌。(https://raw.githubusercontent.com/disqus/disqus.github.com/master/_posts/2011-02-20-antonkovalyov-why-i-forked-jslint-to-jshint.html)于是,JSLint从一个帮助程序员规范代码,避免Bug的工具,变成了一个让你写的代码像Crockford的工具。在最不信神的IT界,这当然不能忍了。2011年,一个叫AntonKovalyov的前端程序员借助开源社区的力量弄出来了JSHint,其思想基本上和JSLint是一致的,但是其有一下几项优势:

  • 可配置规则,每个团队可以自己定义自己想要的代码规范。
  • 对社区非常友好,社区支持度高。几乎所有的主流编辑器,IDE都有了JSHint的插件,前端构建工具Grunt,Gulp也都有其插件,另外还有很多基于JSHint的酷炫小项目,参见:http://www.jshint.com/install/。
  • 可定制的结果报表。做CI的时候就方便美观多了。
好了,下面就来看一下如何使用JSHint?

安装,使用

还是情不自禁的啰嗦一下,在我看来,Node最大的功绩不在于让JavaScript可以写后台程序,而在于其繁荣了整个前端开源社区。在Node环境下,安装JSHint非常简单:

npm install jshint (-g)

然后就可以通过如下的命令检测代码

jshint ./app/model.js

默认情况下会得到如下的结果

./app/model.js:line27,col2,Missingsemicolon.

配置与规则

前面已经提到,JSHint最大的优势在于其可配置性。JSHint的确提供了非常细致的配置规则。

开发者可以通过3种方式指定团队的代码规范:

运行时通过--config指定配置文件。

使用特殊的文件名.jshintrc,运行时jshint会从当前路径下开始,一层一层往上找。

自己把规则配置到项目的package.json中,放置到属性名jshintConfig下。

JSHint的config文件就是一个json文件,里面配置的就是一堆的JSHint规则,如下:

{
  "undef": true,
  "unused": true,
  "predef": [ "MY_GLOBAL" ]
}

例子中的配置规则要求:

  • “undef”:所有使用的变量都必须已定义
  • “unused”:所有定义的变量都必须被使用
  • “predef”:这些变量已定义,检查时不用检测其是否已定义

JSHint配置文件中的规则有3类:

  • Enforcing:这些规则被置为true,JSHint会对代码进行更严格的检查。
  • Relaxing:这些规则被置为true,JSHint会容忍规则中定义的情况出现。
  • Environment:这些规则被置为true,JSHint会认为代码默认有一些全局变量。

JSHint支持的所有规则,以及每个规则的值应该怎么填。参见:http://www.jshint.com/docs/options/。

前面提到了可以通过配置文件指定项目中的JavaScript代码需要遵守的规则,但是在实际项目中,存在某个文件需要特别的处理,或者是某个文件的某个方法需要特别的宽容的情况,对于这种情况,JSHint提供了一些指令内嵌到JavaScript代码中,在JSHint检查的时候会根据指令进行处理。JSHint提供的指令有:

jshint:设置JSHint规则,eg:/jshintstrict:true/

jslint:设置JSHint兼容的JSLint规则,eg:/jslintvars:true/

globals:设置全局变量的处理,eg:/globalMY_LIB:false/

exported:告诉JSHint,当前文件会导出一些全局变量。eg:/exportedEXPORTED_LIB/

ignore:忽略一些代码,可忽略一段代码,也可忽略仅一行。eg://CodeherewillbelintedwithJSHint./jshintignore:start///CodeherewillbelintedwithignoredbyJSHint./jshintignore:end/

ignoreThis();//jshintignore:line

基本上来说,JSHint对于可配置性的处理非常完善,但是不得不说的是,其也让整个配置规则看起来比较复杂。

和Gulp集成

社区的力量是无穷的,目前个人最偏好的前端构建工具是Gulp,而JSHint可以非常方便的与Gulp集成,从而让前端的整个构建看起来更加的统一,不要一会执行JSHint任务,一会儿又是Gulp任务。

首先,安装JSHint的Gulp插件:

npm install gulp-jshint --save-dev

然后,编写运行JSHint的任务

var jshint = require('gulp-jshint');

gulp.task('hint', function () {
    gulp.src('./app/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
然后,只需要运行gulp hint即可检查代码。

就是这么简单。

JSHint:https://github.com/jshint/jshint/

gulp-jshint:https://github.com/spenceralger/gulp-jshint

相关推荐