この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
JSHint
JSHintとは、Javascript用構文チェッカーです。 構文チェッカーとしては、かなり厳しめのチェックをしてくれるJSLintがありますが、 これをforkして融通効くようにしたものがJSHintです。 詳しい経緯はここに。
とりあえずどんなチェックをしてくれるか知りたい場合、 このサイトでJavascriptのコード入力すれば、 どのようなチェックをしてくれるかわかります。 今回はコマンドラインからJSHintを使ってみたり、Sublime Text2から使ってみましょう。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.4
- Node.js : v0.10.0
- npm : 1.2.14
- Grunt : 0.4
npmを使用してJSHintをインストールします。 このモジュールはグローバルオプションをつけてインストールしましょう。
% npm install -g jshintコマンドラインでJSHintを使う
JSHintの設定はホームディレクトリに置かれた.jshintrcファイルにしたがってチェックします。 チェック内容の詳細はここで確認してもらうとして、とりあえず下記の.jshintrcファイルをおいておきましょう。下記ルールに従っていないjsファイルは警告が出ます。
{
"indent" : 2, // インデント
"camelcase":true, // キャメルケース
"maxlen" : 80, // 一行の最大文字数
"unused" : true, // 宣言のみで使用していない変数を検出
"eqeqeq":true, // ==、!=の使用禁止
"undef" : true, // グローバル変数へのアクセスを禁止
"devel" : true // console、alertを許可
}.jshintrcを記述したら、チェック対象になるfoo.jsファイルを作成します。
function x(a,b) {
return a + b;
}
res = x(10,20);
console.log("res = " + res);jshintを実行してみてください。先ほどの設定に応じた、いくつかの警告が出ます。
% jshint foo.js
foo.js: line 2, col 2, Expected 'return' to have an indentation at 3 instead at 2.
foo.js: line 5, col 1, 'res' is not defined.
foo.js: line 6, col 24, 'res' is not defined.Sublime Text2でJSHintによるチェックを行う
jshintコマンドを使えば構文チェックは出来ましたが、いちいちコマンドを入力してチェックするのは面倒です。 SublimeLinterというパッケージを使用すると、JSHintによるチェックをエディタ上で確認することができます。
まずは、Sublime Text2のパッケージコントロール(Shit + Command + p)を起動し、
インストール(Package Controll:Install Package)を選択しましょう。
そこで、SublimeLinterを選択してインストールします。
次に、メニューからSublimeLinterの設定画面を開きます。
設定画面では、次の記述をしてください。JSHintのルールは、ホームディレクトリの.jshintrcが参照されます。
{
"sublimelinter_delay": 0.3,
// If true, lines with errors or warnings will have a gutter mark.
"sublimelinter_gutter_marks": true,
// If true, the find next/previous error commands will wrap.
"sublimelinter_wrap_find": true,
// Use ~/.jshintrc instead
"jshint_options": {}
}
では、先ほどのfoo.jsを開いてみましょう。JShintによる警告が一目でわかりますね。ソースを修正すれば、すぐに警告も修正されます。
まとめ
WebStormの場合はJSHint(JSLint)をチェックを行うための設定がありますが、これらを使用すればSublime Text2でも楽に構文チェックができますね。 なお、Grunt用モジュールもあるので、一連のタスクに組み込んでのチェックもできます。
参考サイトなど
- JSHint: https://github.com/jshint/jshint
- SublimeLinter: https://github.com/SublimeLinter/SublimeLinter
3
