小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


JavaScriptの構文チェックができるJavaScript Lintの使い方

JavaScript

はじめに

JavaScriptの構文チェックができるツールに、JavaScript Lintというツールがあります。今日は、このJavaScript Lintの使い方をご紹介します。

※現在の最新バージョンは、0.3.0となっていますので、これを元に説明しています。

JavaScript Lint

HTMLの文法をチェックするツールに、Another HTML-lint gateway はてなブックマーク - Another HTML-lint gatewayがありますが、JavaScript LintはこれのJavaScript版だと思ってください。テキストエリアに入力されたコードをオンラインでチェックする方法とコマンドラインでチェックする方法の2つ使い方ができます。
企業でクローズドなプログラムを書いている場合、むやみやたらにソースコードをオンラインでチェックすることはできません。情報が外部に漏れる可能性があるからです。また、オンラインでのチェックは、1ファイルずつしか行えない上、レスポンスがあまり早くありません。その点から言っても、ローカルでのコマンドラインチェックができるというのは、とても魅力的です。

JavaScript Lintでチェックできるもの

JavaScript Lintでは、以下のような構文の問題を検出することができます。

* 足りないセミコロン
* ifやfor、while等のないところにあるブレース（"{}"）など
* セミコロンではなくコンマで区切られてしまっている文
* returnやthrow、continueやbreakによって、実行されることが無くなってしまっているコード
* breakの無いcase文
* おかしな場所でのインクリメントやデクリメント
* voidが使われている時
* "x+++y"の様に連続している"+"や"-"
* ループ部分の中でlabeled ステートメントが使われいる部分
* ブレースが使われていないif, for, while
* 数値の前や後についている小数点
* A leading zero that turns a number into octal (base 8).（？）
* コメント内にあるコメント
* バーレンやアサインメント、コロンやカンマが前に来ていない正規表現
* 一つの文なのかそうじゃないのか分からない、繋がった文
* 何もしていない文
"JavaScript Lint"でJavaScriptの文法を細かくチェックする：：[7korobi8oki.com] はてなブックマーク -

JavaScript Lintのダウンロード

1.以下のサイトから、お使いのプラットフォームに合わせて、JavaScript Lintをダウンロードします。

2.ダウンロードしたファイルを解凍して、任意のディレクトリに格納します。

コマンドラインでの構文チェック

コマンドラインからJavaScript Lintで構文チェックを行う方法を説明します。僕の環境はMacなので、Mac環境での説明となりますが、他のOSをお使いの方は、適宜読み替えてください。
1.ターミナルを起動し、JavaScript Lintのディレクトリに移動します。

$ cd jsl-0.3.0-mac

2.指定したjsファイルの構文チェックを行うには、-processオプションでチェック対象のファイル名を指定します。

$ ./jsl -process test.js

3.試しに、セミコロンがないjsファイルをJavaScript Lintでチェックすると、以下のような警告が出力されます。警告やエラーメッセージはすべて英語です。

test.js(4): lint warning: missing semicolon

設定ファイルを使って構文チェックを行う

JavaScript Lintには、チェック項目の有効・無効を切り替えられる設定ファイルがあります。ディレクトリ内に同胞されているjsl.default.confというファイルがこの設定ファイルです。今度は、この設定ファイルを使った構文チェックの方法を説明します。

1.オリジナルの設定ファイルを直接編集してしまうのは、あまり好ましくないので、新規に設定ファイルを作成します。以下のコマンドを実行すると、jsl.confというもう1つの設定ファイルが新規に作成されます。

$ ./jsl -help:conf > jsl.conf

2.jsl.confを編集します。jsl.confの末尾に+processという項目があるので、これをコメントアウトします。*1

+process jsl-test.js
↓
#+process jsl-test.js

3.設定ファイルを使って構文チェックを行うには、-confオプションで設定ファイルを指定します。

./jsl -conf jsl.conf -process test.js
チェック項目のON/OFF

JavaScript Lintは、数多くのチェック項目があり、このチェック項目に従い、ソースコードを厳しくチェックしてくれます。ただ、このチェックはいらないよという場合には、チェックをOFFにすることもできます。
さきほど作成したjsl.confの9行目あたりから「### Warnings」という項目がありますが、これが各チェック項目を表しています。各チェック項目の行頭にある「+」がチェックを行うという意味で、反対に「-」はチェックを行わないという意味です。この「+」と「-」を切り替えることで、カスタムした構文チェックを行うことができます。

できた設定ファイル(上記では jsl.conf)を、"+" と "-" を入れ替えることによって、適当に編集します。
JavaScript Lint - あどけない話 はてなブックマーク - JavaScript Lint - あどけない話

おわりに

以上が、JavaScript Lintの基本的な使い方です。
エラーメッセージは残念ながらすべて英語ですが、それほど難しい英語でもないので、なんとか読めるのではないかと思っています。
最新バージョンがまだ0.3.0となっており、開発途中であることが伺えますが、これから徐々にアップデートされていくことを期待しています。

以下のエントリもあわせてどうぞ

*1:コメントアウトしない場合、ここで指定したファイルが優先的に構文チェックされます。