JSHintは、JavaScriptで記述されたプログラム内の疑わしい使用箇所にフラグを立てるプログラムです。コアプロジェクトは、ライブラリ自体と、Nodeモジュールとして配布されるCLIプログラムで構成されています。
その他のドキュメント: JSHintオプション一覧 · コマンドラインインターフェース · API · 独自のリポーターの作成 · FAQ
まず、お好みの環境にJSHintをインストールする方法については、インストール手順をご確認ください。コマンドライン実行可能ファイルとJavaScript APIの両方で、JSHintの動作を設定する独自の方法を提供しています。最も一般的な使用方法は次のとおりです。
お好みの環境に関わらず、任意の数のlintオプションを指定することで、JSHintの動作を制御できます。さらに、JSHintは、入力ソースコード内で宣言されたディレクティブを尊重します。詳細については、インラインディレクティブに関するセクションを参照してください。
JSHintにはデフォルトの警告セットが付属していますが、非常に設定可能になるように設計されています。JSHintの設定方法は主に3つあります。--config
フラグで設定ファイルをマニュアルで指定するか、特別なファイル.jshintrc
を使用するか、プロジェクトのpackage.json
ファイルのjshintConfig
プロパティに設定を記述します。.jshintrc
の場合、JSHintは、lintされるファイルと同じディレクトリでこのファイルの検索を開始します。見つからない場合は、ディレクトリツリーを1レベルずつ上に移動して、ファイルシステムのルートまで移動します。(入力がstdinからのものである場合、JSHintは設定ファイルの検索を試みないことに注意してください)
この設定により、プロジェクトごとに異なる設定ファイルを持つことができます。ファイルをプロジェクトのルートディレクトリに配置し、プロジェクトディレクトリツリー内のどこからでもJSHintを実行する限り、同じ設定ファイルが使用されます。
設定ファイルは、有効または無効にするJSHintオプションを指定するシンプルなJSONファイルです。たとえば、次のファイルは、未定義および未使用の変数に関する警告を有効にし、MY_GLOBAL
という名前のグローバル変数についてJSHintに通知します。
{
"undef": true,
"unused": true,
"globals": {
"MY_GLOBAL": true
}
}
設定ファイルを使用するだけでなく、特別なコメントを使用してファイル内からJSHintを設定できます。これらのコメントは、jshint
やglobals
(以下の完全なリスト)などのラベルで始まり、その後にコンマ区切りの値のリストが続きます。たとえば、次のスニペットは、未定義および未使用の変数に関する警告を有効にし、MY_GLOBAL
という名前のグローバル変数についてJSHintに通知します。
/* jshint undef: true, unused: true */
/* globals MY_GLOBAL */
複数行と1行コメントの両方を使用してJSHintを設定できます。これらのコメントは関数スコープであり、関数内に配置した場合、この関数のコードのみに影響します。
JSHintでサポートされている構成ディレクティブのリストを次に示します
JSHintオプションを設定するためのディレクティブ。
/* jshint strict: true */
JSHint互換のJSLintオプションを設定するためのディレクティブ。
/* jslint vars: true */
他の場所で定義されているグローバル変数についてJSHintに通知するためのディレクティブ。値がfalse
(デフォルト)の場合、JSHintはその変数を読み取り専用と見なします。undef
オプションに影響します。
/* globals MY_LIB: false */
また、特定のグローバル変数をブラックリストに追加して、現在のファイル内のどこでも使用されないようにすることもできます。
/* globals -BAD_LIB */
現在のファイルで定義されているが、他の場所で使用されているグローバル変数についてJSHintに通知するためのディレクティブ。unused
オプションに影響します。
/* exported EXPORTED_LIB */
使用するすべてのプロパティについてJSHintに通知するためのディレクティブ。このディレクティブは非推奨になりました。
JSHintにコードブロックを無視するように指示するディレクティブ。
// Code here will be linted with JSHint.
/* jshint ignore:start */
// Code here will be ignored by JSHint.
/* jshint ignore:end */
ignore:start
とignore:end
の間のすべてのコードはJSHintに渡されないため、Facebook Reactなどの言語拡張を使用できます。さらに、末尾にコメントを付けて単一行を無視することもできます
ignoreThis(); // jshint ignore:line
JSHintを自分の好みに合わせて調整する必要がある場合、適切なオプションを見つけるだけで十分な場合がほとんどです。JSHintオプションの仕組みを理解しようとすると混乱して不満がたまる可能性があります(そして、私たちはそれを修正するために取り組んでいます!)ので、次のいくつかの段落を注意深くお読みください。
JSHintには、強制と緩和の2種類のオプションがあります。前者はJSHintをより厳密にするために使用され、後者は一部の警告を抑制するために使用されます。例として次のコードを見てください。
function main(a, b) {
return a == null;
}
このコードは、デフォルトのJSHintオプションで実行すると、次の警告を生成します
line 2, col 14, Use '===' to compare with 'null'.
たとえば、あなたが何をしているかを知っていて、生成された警告を無効にしたいが、同時に、定義されているが使用されていない変数があるかどうかを知りたいとします。この場合に必要なことは、2つのオプションを有効にすることです。1つは=== null
警告を抑制する緩和オプション、もう1つは未使用の変数のチェックを有効にする強制オプションです。この場合、これらのオプションはunused
とeqnull
です。
/*jshint unused:true, eqnull:true */
function main(a, b) {
return a == null;
}
その後、JSHintはこのサンプルコードをlintすると、次の警告を生成します
demo.js: line 2, col 14, 'main' is defined but never used.
demo.js: line 2, col 19, 'b' is defined but never used.
JSHintには、特定の警告を無効にする適切なオプションがない場合があります。この場合、jshint
ディレクティブを使用して、コードで警告を無効にできます。たとえば、複数の異なるファイルを1つに結合して作成されたファイルがあるとします。
"use strict";
/* ... */
// From another file
function b() {
"use strict";
/* ... */
}
このコードは、関数b
内の不要なディレクティブに関する警告をトリガーします。JSHintは、すでにグローバルな"use strict"ディレクティブが存在することを確認し、他のすべてのディレクティブが冗長であることを通知します。ただし、ファイルは自動生成されたため、これらのディレクティブを削除したくありません。解決策は、--verbose
フラグを付けてJSHintを実行し、警告コード(この場合はW034)に注意することです。
$ jshint --verbose myfile.js
myfile.js: line 6, col 3, Unnecessary directive "use strict". (W034)
次に、この警告を非表示にするには、次のスニペットをファイルに追加します
/* jshint -W034 */
いくつかの注意点
W
で始まる)でのみ機能し、エラー(コードがE
で始まる)では機能しません。上記のスニペットで無効にされた警告を再度有効にするには、次を使用できます
/* jshint +W034 */
これは、警告を引き起こすコードがあるが、そのコンテキストでは安全であることがわかっている場合に特に役立ちます。このような場合は、上記のように警告を無効にしてから、後で警告を再度有効にすることができます。
var y = Object.create(null);
// ...
/*jshint -W089 */
for (var prop in y) {
// ...
}
/*jshint +W089 */
このページには、JSHintでサポートされているすべてのオプションのリストが含まれています。
デフォルトでは、JSHintはswitch文内でbreak
またはreturn
ステートメントを省略すると警告します
switch (cond) {
case "one":
doSomething(); // JSHint will warn about missing 'break' here.
case "two":
doSomethingElse();
}
本当に何をしているのかわかっている場合は、/* falls through */
コメントを追加することで、ケースブロックがフォールスルーすることを意図したことをJSHintに伝えることができます
switch (cond) {
case "one":
doSomething();
/* falls through */
case "two":
doSomethingElse();
}