Mac上でJSHint + Gruntを使ってJavaScriptの文法チェック

投稿日：

grunt_jshintTitaniumの開発で、今まではTitanium Studioの画面にエラーがないか確認していた。しかしTitanium StudioはJSLintを使っているのでチェックが厳しい。

for文内のcontinueを許可したかったり、Warningを消す設定が面倒くさくなったので、Titanium Studioを使わずJSHint + Grountを使ってリアルタイムにファイル監視しながら開発してみることにした。

環境： Mac OS X 10.9.3, Titanium SDK 3.2.3.GA

基本はCentOS上にインストールしたときと一緒。

JSHintをインストール。
$ sudo npm install jshint -g

Gruntのコマンドラインツールをインストール。
$ sudo npm install grunt-cli -g

プロジェクトディレクトリに移動してGrunt本体とプラグインをインストール。
$ cd ~/Documents/Titanium_Studio_Workspace/project/
$ sudo npm install grunt
$ sudo npm install grunt-contrib-jshint
$ sudo npm install grunt-contrib-watch

grunt-contrib-jshintを試してみる。
$ vi Gruntfile.js

module.exports = function(grunt){
    // Load plugins
    grunt.loadNpmTasks("grunt-contrib-jshint");

    grunt.initConfig({
        jshint : {
            all : ['Resources/**/*.js']
        }
    });
};

実行
$ grunt jshint:all

オプションなど詳しくはgrunt-contrib-jshintのGitHubページで確認。

 

次はファイルを保存したタイミングで実行する処理を追記。
$ vi Gruntfile.js

module.exports = function(grunt){
    // Load plugins
    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        jshint : {
            all : ['Resources/**/*.js']
        },
        watch : {
            jshint : {
                files : ["Resources/**/*.js"],
                tasks : ["jshint:all"]
            }
        }
    });
};

監視開始。
$ grunt watch:jshint

 

"L"や"Ti"は.jshintrcを編集してGlobalとして登録する。詳しくは公式ドキュメントを参考に。

 

他のプロジェクトでも流用したいのでGruntfile.jsに記述することにした。Gistで公開しているので参考にどうぞ。

 

便利すぎる。もっと早くやっておくべきだった。

 

< Related Posts >