HTML5資料室 » JSLint/JSHint

JSLint/JSHint

Last modified by fukudayasuo on 2013/07/31, 13:51

JSLintとは
JSLintプラグインの使用方法
チェックルール一覧 - JSLint
- JSLint独自の項目
- JSHintと共通の項目
JSHintとは
チェックルール一覧 - JSHint

JSLintとは

(JSLint.com - What is JSLint? を大まかに和訳しました。)

JSLintとは、対象のJavaScriptプログラムから問題となる箇所を検索するコード品質ツールです。
C言語が登場して間もない頃、コンパイラによって捕えることができなかったプログラムミスがあったため、ソースファイルを検証するためのツールとしてLintが開発されました。今ではC言語は成熟し、コンパイラがエラーを捕えて警告出来るようになったためLintは必要なくなりました。
JavaScriptも登場して比較的若い言語で、ウェブページ上で細かい処理を行うことを目的としていました。しかしJavaScriptは非常に有能な言語です。現在では大きなプロジェクトで使われていますがプロジェクトが複雑になると、言語を使いやすくすることを目的とした特徴の多くが厄介になるため、JavaScriptの為のLintが必要となります。
JSLintはJavaScript構文チェッカーとバリデーターをもち、ソースコードを検証します。問題を見つけると、該当するソースコードの場所と問題点をメッセージとして返します。頻繁にはありますが、警告された問題が必ずしも構文エラーというわけではありません。JSLintは形式や規約、構造的な問題をチェックします。
JSLintはECMASCriptプログラミング言語標準の第3版を、専門のサブセットとして定めています。JavaScriptコード規約に含まれている提言は、サブセットと関連しています。
JavaScriptはいいかげんででありながらも簡潔で美しい良い言語です。JSLintはプログラムのコード品質の向上を助けます。JSLintは、コードの品質によってはたとえブラウザで動いたとしても、結果不合格と判定します。JSLintが指摘した問題点に全て対応すべきです。
JSLintは、JavaScript、HTML、CSSまたはJSONテキストで使用することができます。

JSLintプラグインの使用方法

各種ツール・ライブラリ » JSLintプラグインをご覧ください。

チェックルール一覧 - JSLint

JSLint独自の項目

オプション	内容	値	エラーメッセージ
safe	ADsafeルールのうち、ウィジェット向けのルール以外をチェックするか	チェックする: true / チェックしない: false	ADsafe violation: '・・・'.
adsafe	ADsafe のルールを適用するか	false	ADsafe violation: '・・・'.
properties	/properties/コメントを利用して全プロパティのスペルミスをチェックするか	false	Unexpected /property/ '・・・'.
css	@charset 'UTF-8' の定義が無いCSSを許容する.	false	・Unexpected '・・・'. ・Unrecognized style attribute '・・・'.
unparam	未使用の変数の存在を許容する.	false	'・・・' was used before it was defined.
cap	大文字のHTMLタグの使用を許容する.	false	Attribute '・・・' not all lower case.
widget	Yahoo Widget環境で提供されているグローバル変数・関数があらかじめ定義されていると仮定するか	false	'・・・' is not defined.
indent	指定されたインデント幅かチェックする (0が指定された場合はチェックしない)	4	Expected '・・・' at column ・・・, not column ・・・.
vars	function内に、複数のvarステートメントが定義されていることを許容する.	true	Combine this with the previous 'var' statement.
fragment	HTMLのフラグメント識別子を許容する.	false	ADSAFE: Use the fragment option.
confusion	ある変数の型が途中で別の型変わることを許容する.	true	Type confusion: ・・・ and ・・・.
on	HTMLでイベントハンドラの登録を許容する.	false	Avoid HTML event handlers.
eqeq	抽象比較( == または！= ) の使用を許容する.	true	Expected '・・・' and instead saw '・・・'.
sloppy	'use strict'の使用を禁止する.	true	Missing 'use strict' statement.
maxlen	ソースコード行数をチェックする(指定なし：全行)		Line too long.
'continue'	continueを許容する.	true	Unexpected '・・・'.
windows	Windows固有のグローバル変数・関数の使用を許容する.	false	'・・・' is not defined.

windowsオプションがtrueの場合、以下のオブジェクトを使用していると警告します。
- ActiveXObject
- Cscript
- Debug
- Enumerator
- System
- VBArray
- Wscript
- WSH

JSHintと共通の項目

オプション	内容	値
browser	documentやwindow等、モダンブラウザ環境で存在するオブジェクトの使用を許容する.	true
devel	alert、confirm、console、Debug、opera、promptを使用を許容する.	false
maxerr	許容するエラーの最大数(指定なし：50個)	1000
white	不適切なインデントやスペースを許容する.	true
es5	ECMAScript5の文法を許容する.	false
passfail	1個目のエラーでチェックを停止する.	false
debug	debuggerキーワードを許容する.	false
sub	配列表記でオブジェクトのプロパティへ参照することを許容する.	true
bitwise	ビット演算子の使用を禁止する.	true
nomen	名前の先頭または末尾でアンダーバーを禁止する.	false
regexp	正規表現の . (任意の1文字)と [^...] (指定した文字以外)を禁止する.	false
forin	hasOwnPropertyメソッドでチェックを行っていないfor-in文を禁止する.	false
node	node.jsで生成されるオブジェクトの使用を許容する.	false
rhino	Rhinoで生成されるオブジェクトの使用を許容する.	false
undef	宣言の無い変数または関数を禁止する.	true
evil	eval関数を許容する.	false
newcap	コンストラクタの一文字目が小文字であることを禁止する.	true
plusplus	インクリメント(++)・デクリメント(--)を禁止する.	false

JSHintとは

JSHintとは、JSHintと同様のコード検査ツールです。
JSLintとの違いは、JSLintより柔軟にオプションが設定出来る点と、JSLintでは未対応の検査もできる点です。

チェックルール一覧 - JSHint

Enforcing Options

オプション	内容	値	エラーメッセージ
bitwise	ビット演算子が使用されているか	チェックする: true / チェックしない: false	Unexpected use of '・・・'.
curly	中カッコでブロックされているか	チェックする: true / チェックしない: false	Expected '{' and instead saw '・・・'.
eqeqeq	厳密等価演算子(===, ！==)を使用しているか	チェックする: true / チェックしない: false	Use '===' to compare with 'null'.

// ×
if (a == null)
console.log("curly");
// 〇
if (a === null) {
console.log("curly");
}

forin

for-inでオブジェクトを参照するする際、hasOwnProperty()を使用しているか

チェックする: true / チェックしない: false

The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype

// ×
for (var p in obj) {
    ～
}
// 〇
for (var p in obj) {
    if (obj.hasOwnProperty(obj[p]) {
       // 継承されていないプロパティに対する処理
    }
}

immed

即時関数パターンが、カッコで囲われているか

チェックする: true / チェックしない: false

・Move the invocation into the parens that contain the function. ・Wrap an immediate function invocation in parentheses to assist the reader in understanding that the expression is the result of a function, and not the function itself.

// ×
(function() {
～
})()

// 〇
((function() {
～
})())

latedef	変数を定義する前に呼び出しているか	チェックする: true / チェックしない: false	'・・・' was used before it was defined.
newcap	コンストラクタ名の一文字目が大文字か	チェックする: true / チェックしない: false	A constructor name should start with an uppercase letter.
noarg	arguments.caller と　arguments.calleeの使用されているか	チェックする: true / チェックしない: false	Avoid arguments.callee.
noempty	処理が記述されていない空のブロックが存在するか	チェックする: true / チェックしない: false	Empty block.

// ×
if (a ==10) {}
// 〇
if (a == 10) {
console.log("aaa");
}

nonew	newキーワードが使用されているか	チェックする: true / チェックしない: false	Do not use 'new' for side effects.
plusplus	++ または -- が使用されているか	チェックする: true / チェックしない: false	Unexpected use of '++'.
regexp	正規表現に．（ドット）が使用されているか	チェックする: true / チェックしない: false	Insecure '.'.
undef	宣言の無い変数または関数が使用されているか	チェックする: true / チェックしない: false	'・・・' is not defined.
strict	"use strict"が宣言されているか	チェックする: true / チェックしない: false	Missing "use strict" statement.

Relaxing Options

asi	セミコロンの未挿入を許容するか	許容する: true / 許容しない: false	Missing semicolon.
boss	ifの条件/while・doの反復条件/forの終了条件で、変数へ代入する処理を許容するか	許容する: true / 許容しない: false	Expected a conditional expression and instead saw an assignment.
debug	debuggerキーワードを許容するか	許容する: true / 許容しない: false	All 'debugger' statements should be removed.
eqnull	== null または　== undefinedを許容するか	許容する: true / 許容しない: false	Use '===' to compare with '～'.
es5	ECMAScript5の文法を許容するか	許容する: true / 許容しない: false	Unexpected dangling
evil	eval関数の使用を許容するか	許容する: true / 許容しない: false	eval is evil.
expr	宣言または関数呼び出しではなく、式として使用することを許容するか	許容する: true / 許容しない: false	Expected an assignment or function call and instead saw an expression.

// 関数hogeが定義されている場合、関数を式として使用するとこの警告が出る
function hoge() { }
hoge ? 1 : 0; // ×

// 以下のような場合は問題ない。
if (hoge === undefined) // 〇
var a = hoge; // 〇

iterator	__iterator__プロパティを許容するか	許容する: true / 許容しない: false	__iterator__' is only available in JavaScript 1.7.
lastsemic	セミコロンが無い構文を許容するか	許容する: true / 許容しない: false	Missing semicolon.
laxbreak	安全でない改行を許容するか	許容する: true / 許容しない: false	Bad line breaking before '～'.

// パターンのひとつに、+の前に改行があると警告される。
"aaaa"
+ "bb"; // ×

"aaaa"+
"bb"; // 〇

loopfunc

ループ内で関数式を許容するか

許容する: true / 許容しない: false

Don't make functions within a loop.

// ×
var nums = [];

for (var i = 0; i < 10; i++) {
   (function (i) {
      nums[i] = function (j) {
        return i + j;
      }
   }(i));
}

// 〇
var nums = [];

for (var i = 0; i < 10; i++) {
   nums[i] = function (j) {
     return i + j;
   };
}
nums[0](2);
// Prints 12 instead of 2

onecase	caseが一つしかないswitch文を許容するか	許容する: true / 許容しない: false	This 'switch' should be an 'if'.
proto	__proto__の使用を許容するか	許容する: true / 許容しない: false	The '__proto__' property is deprecated.
regexdash	正規表現の制御文で、角カッコ内の先頭または末尾にハイフン"-"の存在を許容する.	許容する: true / 許容しない: false	Unescaped '-'.
scripturl	javascript: で始まるURLを許容する.	許容する: true / 許容しない: false	Script URL.
shadow	同一スコープで、名前が重複している関数の定義を許容する.	許容する: true / 許容しない: false	'・・・' is already defined.
sub	配列表記でオブジェクトのプロパティへアクセスすることを許容するか	許容する: true / 許容しない: false	['・・・'] is better written in dot notation.

window['navigator'] // ×
window.navigator // 〇

supernew

変わったnew演算子の使い方を許容する

許容する: true / 許容しない: false

Weird construction. Delete

var func = new function() {} // ×

var func = function() {}
var hoge = new func(); // 〇

validthis

非コンストラクタ関数内でthisの使用を許容する.

許容する: true / 許容しない: false

Possible strict violation.

// 以下のようなコードの場合に指摘される

(function () {
   "use strict";
   function say() {
      this.hello = 'world';
    }
    say();
}());

Environments

browser	documentやwindow等、モダンブラウザ環境で存在するオブジェクトの使用を許容するか	許容する: true / 許容しない: false
couch	CouchDBで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false
devel	alert、confirm、console、Debug、opera、promptを使用を許容するか.	許容する: true / 許容しない: false
dojo	Dojo Toolkitで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false
jquery	jQueryで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false
mootools	mootoolsで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false
node	node.jsで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false
nonstandard	escape, unescape関数の使用を許容するか	許容する: true / 許容しない: false
prototypejs	prototype.jsで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false
rhino	Rhinoで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false
wsh	Windwos Scripting Hostで生成されるオブジェクトの使用を許容するか	許容する: true / 許容しない: false

Legacy

nomen	名前の先頭または末尾にアンダーバーが付いているオブジェクト名をチェックするか	チェックする: true / チェックしない: false	Unexpected '・・・' in '・・・'
onevar	1つの関数で2つ以上のvarステートメントをチェックするか.	チェックする: true / チェックしない: false	Too many var statements.
passfail	1個目のエラーが見つかったときに、テストを停止するか.	停止する: true / 停止しない: false	Stopping
white	コードスタイル(インデントや空白の配置について)が、JSLintの作者が提唱するスタイルと一致するかチェックする.	チェックする: true / チェックしない: false	Unexpected space after

JSHintが必ずチェックする項目

同一行のインデントに、TABとスペースが混在している	Mixed spaces and tabs.
内部関数が先頭で定義されていない	Inner functions should be listed at the top of the outer function.