Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

JSLint Multiを知っていますか?

こんにちは、石尾です。

JSLintを利用して、JavaScriptの構文チェックを行っている人は多いかと思います。
JSLintサイトで、JavaScriptをコピペして利用したり、
http://www.jslint.com/

jslint.vimやjslintを開発環境に設定して利用している人もいるでしょう。
jslint.vimで正しいJavaScriptを書く | monoの開発ブログ
MacでJSLintをの実行環境をいい感じに整える。 - modifiedの日記
また、JSLintが組み込まれたエディタやeclipseプラグインでJSLintの構文チェックを行っているかも知れません。
Komodo Edit: Free Editor for Perl, Python, Tcl, PHP, Ruby, HTML, CSS, Javascript
http://marketplace.eclipse.org/content/jslint-eclipse-plugin#.UmcwqE3Ulwc

個人的にJavaScriptのコーディングを行う際は、標準的なエディタ(サクラエディタなど)を利用しています。標準的なエディタでも、JSLintを使って動的に構文チェックができないか?とツールを探していると
「JSLint Multi」が見つかりました!!

「JSLint Multi」は、Yahoo!WidgetEngine上で利用するJSLintのツールです。無料で利用できます。

では、実際に使ってみます。
※試した環境は、Windows7(64bit)です。

Yahoo!WidgetEngineのインストール

まずは、Yahoo!WidgetEngineをインストールします。widgetsus.exeをダウンロードしてファイルを実行すると、Setup画面が開きます。Setup画面に準じていくと、インストールできます。
Yahoo! Widget Engine 4.5.2をダウンロードする - FileHippo.com

JSLint Multiのインストール

次のサイトより、JSLint Multi 1.2.1.widgetをダウンロードしてファイルを実行すると、
jslint-multi-widget - With JSLint Multi you can monitor multiple javascript files and continually have them verified with the newest JSLint engine. - Google Project Hosting
次のダイアログが開きます。

[はい]をクリックすると、確認ダイアログが開きます。

[ウィジェットを使用]をクリックすると、JSLint MultiのWidgetが開きます。インストール完了です。

JSLint Multiを使ってみます

Widgetの[Drag a file, folder or URI here]欄にJavaScriptファイルをドラッグします。今回のJavaScriptの実装コードは、次のようなコードです。(見るだけで変数定義されていないとすぐわかりますが、)

var a = 0;
b = 1;

JSLintのチェック結果が表示されました。

エディタで、次のようにコードを編集して保存すると、

var a = 0;
var b = 1;

JSLintのチェック結果が「The file is valid=有効なファイル」とメッセージが表示され、ファイルも黄緑色に変わりました。

フォルダをドラッグすると、フォルダ配下のファイルをチェックすることもできます。また、メニューの設定アイコンをクリックし、設定ダイアログの[Tolerance]ボタンより、構文チェックの項目設定を行えます。


JSLint Multiを使ってみては?

JSLint Multiは、ファイルが保存されたタイミングでチェックが行えるため、どんなエディタでも使えます。また、Widget仕様であるため、最前面設定することで、エディタに重ねて表示できます。
インストールも簡単で、環境設定もとくに必要ありません。
使ってみては、いかがでしょうか?