JSファイルを解析してくれるgrunt-jsvalidateについて紹介するよ

はじめに

この投稿はGrunt Plugins Advent Calendar 2013の22日目の記事です。
http://qiita.com/advent-calendar/2013/grunt-plugins/

grunt-jsvalidateとは

EsprimaというJSで実装されたJS解析ライブラリのGruntラッパーです。

• https://github.com/ariya/grunt-jsvalidate
• https://github.com/ariya/esprima
• http://ariya.ofilabs.com/2011/12/introducing-esprima.html

実行速度がべらぼうに高速でThreeJSでも1~2秒で解析可能だそうな。

• https://groups.google.com/forum/#!topic/jshint/eT3dB8_s0ws
• http://www.nczonline.net/blog/2013/07/16/introducing-eslint/

先日発表されたESLintはこのEsprimaをベースに作られているそう。
JSHntも昔はEsprimaを使おうとしてたっぽいけど今は違う風。

JSHintと何が違うの

JSHintは文法的なエラーに加えてある程度カンマの位置だとかブレス省略等を注意して、
JavaScriptのGood Partsを提供しようとしますが、Esprimaは実行上不具合が出るものしか
チェックしないので、コードのスタイルを強制されません。
例えば、以下の様なJSを書いたとします。

var foo = 10
  , bar = 20

これをデフォルトオプションのJSHintにかけると

[L2:C3] I001: Comma warnings can be turned off with 'laxcomma'.
  , bar = 20
[L1:C11] W014: Bad line breaking before ','.
var foo = 10
[L2:C13] W033: Missing semicolon.
  , bar = 20

と、セミコロンがねーよとか、カンマを先頭に書くんじゃねーよ等を言われます。
しかし、grunt-jsvalidate(Esprima)にかけると、1 files are valid.となります。
何故ならば、実行上は、fooもbarが適切に宣言されるからです。

作者は

It is recommended to include the validation task in your default:

grunt.registerTask('default', ['jsvalidate', 'jshint', 'nodeunit', 'concat', 'uglify']);

とデフォルトのタスクに組み込むことを推奨しています。

使い方

package.jsonがあるプロジェクトルートに移動して、
grunt-jsvalidateをインストール。

$ cd ./path/to/your/project
$ npm install grunt-jsvalidate --save-dev

gruntfile.jsは以下の様な感じで。

module.exports = function (grunt) {
  grunt.initConfig({
    jsvalidate: {
      options: {
        globals: {},
        esprimaOptions: {},
        verbose: false
      },
      all: {
        files: {
          src: ['*.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-jsvalidate');
  grunt.registerTask('default', 'jsvalidate');
};