読者です 読者をやめる 読者になる 読者になる

Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

JSHintでJavaScriptの構文チェック

みなさん、こんにちは。
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するだけだと思っていたら、
jQuerynode.js用のオプションもあるなど、
環境を考慮した設定も用意してくれています。

というわけで、早速使ってみましょう。

BackboneをGlobal変数として定義し、
以下のオプションを定義しました。

  • strict : EcmaScript 5のstrictモードかどうか。
  • sub : 配列にアクセスするときに、[]を警告とするかどうか。
  • jquery : jQuery環境かどうか。
  • laxcomma : 行頭のカンマ(,)を許容するかどうか。

あとは、「OK」ボタンを選択すれば、終了です。

私が使ったお試し用のプロジェクトでは、これだけのオプションで

警告が4割減りました。

最後に

JSHintはJSLintよりも絞込みを行いやすい分、使いやすくはなっていますが、
後からの対応すると、たくさんの警告に悩まされることには変わりません。

そのため、事前に環境に適用し、こまめに潰していくことが、
警告に悩まされないための、近道と思います。

是非、活用してみてください。

広告を非表示にする