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

Taste of Tech Topics

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

JSHintでJavaScriptの構文チェック

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

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

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

広告を非表示にする