みなさん、こんにちは。
fujiiです。
今回は、JavaScriptの構文チェックを行う、
JS Hintについて、説明したいと思います。
はじめに
JavaScriptの構文チェックといえば、JSLintが有名ですが、
チェックがあまりにも厳しすぎて、
変数がメソッドの先頭にないと警告。
case文はswitchと同じインデントに書かないと警告。
といった感じで、警告の嵐に苛まれるわけです。
そんなわけで悩んでいたところ、友人から紹介されたのが、
JSHint というわけです。
インストール
自分の作ったファイルをJSHintでチェックするだけなら、JSHintのサイトを開き、
ソースコードをコピーすれば完了ですが、
開発しながら使いたいと思うので、今回は、Eclipse上で実行する方法を説明します。
まずはこちらから、JSHintのEclipseプラグインをダウンロードし、Eclipseのプラグインにインストールしましょう。
Eclipseのメニューバーから、[Window]→[Preferences]を選択し、
JSHintという項目が現れていたら、インストールは完了です。
使い方
それでは、早速使ってみましょう。
プロジェクトを右クリックし、[Properties]を選択します。
下の図のように、JSHintのメニューを選択します。
「Enable JSHint for these files and folders」のAddボタンを選択すると、
インクルード設定用のダイアログが出ます。
あとは、画面に従い、設定を入力するだけです。
試しに、WebContent/resources/js 以下の全てのサブフォルダを選択してみました。
「OK」ボタンを押すと、自動的にチェックが行われます。
結果は、Problemsビューに現れます。
'target' is already defined
と出ていると思ったら、確かに変数定義が誤っていました(^^;
便利な点
とまぁ、設定まで出来たわけですが、これだけだとJSLintと同じで、
警告の嵐に苛まれるだけです。
というわけで、オプションを変更し、警告を絞り込みましょう。
プロジェクトを右クリックし、[Properties]を選択します。
[JSHint]→[Options]を選択すると、オプション選択ダイアログが表示されます。
あとは、Global変数とオプションを定義すれば、
ルールを定義することができます。
ルールは、JSHintのサイトに載っています。
単純に機能をON/OFFするだけだと思っていたら、
jQueryやnode.js用のオプションもあるなど、
環境を考慮した設定も用意してくれています。
というわけで、早速使ってみましょう。
BackboneをGlobal変数として定義し、
以下のオプションを定義しました。
- strict : EcmaScript 5のstrictモードかどうか。
- sub : 配列にアクセスするときに、[]を警告とするかどうか。
- jquery : jQuery環境かどうか。
- laxcomma : 行頭のカンマ(,)を許容するかどうか。
あとは、「OK」ボタンを選択すれば、終了です。
私が使ったお試し用のプロジェクトでは、これだけのオプションで
警告が4割減りました。
最後に
JSHintはJSLintよりも絞込みを行いやすい分、使いやすくはなっていますが、
後からの対応すると、たくさんの警告に悩まされることには変わりません。
そのため、事前に環境に適用し、こまめに潰していくことが、
警告に悩まされないための、近道と思います。
是非、活用してみてください。
