yoshida

ESLintの推奨設定（eslint:recommended）のチェック内容

前々回から引き続き、今回もESLintについて調べてみました。
ESLintの概要については、以前に公開した記事をご確認ください。

ESLintでJavaScriptの構文チェックを始める

ESLintのチェック項目の設定は手間が掛かる

ESLintは.eslintrc.jsのような設定ファイルにチェック内容を記述しなければチェックを行いません。

チェック内容は、設定ファイルのrulesプロパティに、チェック項目をひとつずつ追加することで設定することができます。

 
// .eslintrc.jsの設定例
module.exports = {
  "rules": {
    "indent": ["error", 4],
    "quotes": ["error", "double"]
  }
}

この方法は、案件に合わせて最適なチェック項目を設定することが可能なのですが、ESLintに慣れていなければ設定に手間が掛かります。

"eslint:recommended"で推奨チェック項目だけを手軽にチェック

設定ファイルのextendsプロパティには"eslint:recommended"という設定項目があります。
これを設定すると、チェック項目をひとつずつ追加しなくてもESLintが推奨するチェック項目でまとめてチェックすることができます。

 
// .eslintrc.jsの設定例
module.exports = {
    "extends": "eslint:recommended"
}

チェック項目の設定が面倒！
チェック項目に何を設定すれば良いのかわからない！
という方は、これだけでも基本的なソースの不備を手軽にチェックできるようになります。

"eslint:recommended"で何をチェックしているのか

"eslint:recommended"を使うことで手軽にチェックを始めることができましたが、
実際にチェックをしてエラーが発生すると、個々のエラーの内容について理解しておく必要があります。

エラーが発生する度に、必要に応じてエラー項目を調べていたのですが、
"eslint:recommended"でどのようなチェックが行われているのか、
一通り確認してみようと思いましたので、今回はこれについて調べた内容をまとめてみました。

全部で43のチェック項目がありますが、今回は20項目をご紹介します。
残りは次の機会にご紹介できればと思います。

ESLintのチェック項目一覧

ESLintで用意されているチェック項目は下記のページにまとめられています。

■List of available rules - ESLint - Pluggable JavaScript linter
http://eslint.org/docs/rules/

表の一番左の列にチェックマークが表示されている項目がありますが、
このマークが"eslint:recommended"で使用しているチェック項目を表しています。

"eslint:recommended" のチェック項目（v:3.13.1）

以下では、各チェック項目とエラーが発生するコードのサンプル、サンプルのコードをチェックした場合のエラー文言（他のチェック項目のエラーは除外）を記載しています。

コードのサンプルは主に公式サイトのコードを使用し、必要に応じて補足のコメントを追加しています。

下記のリストは記事作成時の最新のバージョン（3.13.1）を元にしています。
今後のバージョンアップで項目の追加・削除があると思いますのでご注意ください。

no-cond-assign

if, for, while, and do...whileの条件式で代入演算子（=など）を許可しない。
比較演算子（==,===など）のタイプミスで代入演算子が入力された箇所などを見つけてくれます。
 
▼ エラーコードの例

 
var x;
if (x = 0) {  // 比較演算子ではなく代入演算子になっている
    var b = 1;
}

2:5  error  Expected a conditional expression and instead saw an assignment  no-cond-assign

no-console

consoleオブジェクトのメソッド（console.log等）の記述を許可しない。
公開時の消し忘れを防いでくれます。
 
▼ エラーコードの例

 
console.log("Log a debug level message."); // 公開時は不要

1:1  error  Unexpected console statement  no-console

no-constant-condition

if, for, while, and do...whileや三項演算子（?:）の条件式を定数式（リテラルなど）にすることを許可しない。
必ず実行されたり、一度も実行されなかったりするなど、条件文として不適切な記述が無いかチェックしてくれます。
 
▼ エラーコードの例

 
if (false) {  // trueにならない条件
    doSomethingUnfinished();
}

if (void x) {  // trueにならない条件
    doSomethingUnfinished();
}

for (;-2;) {  // 終了しないループ
    doSomethingForever();
}

while (typeof x) {  // 終了しないループ
    doSomethingForever();
}

do { // 終了しないループ
    doSomethingForever();
} while (x = -1);

var result = 0 ? a : b; // 必ず「b」になる

  1:1   error  Unexpected constant condition  no-constant-condition
  5:1   error  Unexpected constant condition  no-constant-condition
  9:1   error  Unexpected constant condition  no-constant-condition
 13:1   error  Unexpected constant condition  no-constant-condition
 17:1   error  Unexpected constant condition  no-constant-condition
 21:14  error  Unexpected constant condition  no-constant-condition

no-control-regex

正規表現内でASCII制御文字の使用を許可しない。
ASCII制御文字が使用されることはほとんどありませんので、正規表現中に含まれる場合は間違いである可能性が高いです。
 
▼ エラーコードの例

 
var pattern1 = /\x1f/; // 「\x1f」は制御文字
var pattern2 = new RegExp("\x1f"); // 「\x1f」は制御文字

1:16  error  Unexpected control character(s) in regular expression: \x1f  no-control-regex
2:27  error  Unexpected control character(s) in regular expression: \x1f  no-control-regex

no-debugger

開発時のブレークポイントの設定などに使用するdebuggerステートメントの記述を許可しない。
公開時の消し忘れを防いでくれます。
 
▼ エラーコードの例

 
function isTruthy(x) {
    debugger; // 公開時は不要
    return Boolean(x);
}

2:5   error  Unexpected 'debugger' statement  no-debugger

no-dupe-args

関数宣言や関数式の引数の重複を許可しない。
引数が重複している場合、先に指定された引数の値は無視されますので、引数に同じ値を重複させる必要はありません。
 
▼ エラーコードの例

 
function foo(a, b, a) { // 「a」が重複
    console.log("value of the second a:", a);
}

var bar = function (a, b, a) { // 「a」が重複
    console.log("value of the second a:", a);
};

1:1   error  Duplicate param 'a'  no-dupe-args
5:11  error  Duplicate param 'a'  no-dupe-args

no-dupe-keys

オブジェクトリテラルでキーの重複を許可しない。
先に指定されたキーの値は無視されますので、キーを重複させる必要はありません。
 
▼ エラーコードの例

 
var foo = {
    bar: "baz",
    bar: "qux" // 「bar」が重複
};

var foo = {
    "bar": "baz",
    bar: "qux" // 「bar」が重複
};

var foo = {
    0x1: "baz",
    1: "qux" // 「0x1」は16進数の「1」
};

3:5  error  Duplicate key 'bar'  no-dupe-keys
8:5  error  Duplicate key 'bar'  no-dupe-keys
13:5  error  Duplicate key '1'  no-dupe-keys

no-duplicate-case

switch文でcaseの重複を許可しない。
先に指定されたcaseの値は無視されますので、caseを重複させる必要はありません。
 
▼ エラーコードの例

 
switch (a) {
    case 1:
        break;
    case 2:
        break;
    case 1: // 「1」が重複
        break;
    default:
        break;
}

6:5  error  Duplicate case label  no-duplicate-case

no-empty-character-class

正規表現で空の文字クラス（[]）を許可しない。
マッチする文字列が無いので、基本的に空の文字クラスが使用されることはありません。
 
▼ エラーコードの例

 
/^abc[]/.test("abcdefg"); // false
"abcdefg".match(/^abc[]/); // null

1:1   error  Empty class  no-empty-character-class
2:17  error  Empty class  no-empty-character-class

no-empty

空のブロックを許可しない。
ただし、コメントのみを含むブロックは空とみなされません。
 
▼ エラーコードの例

 
if (foo) { // 空ブロック
}

while (foo) { // 空ブロック
}

switch(foo) { // 空ブロック
}

1:10  error  Empty block statement  no-empty
4:13  error  Empty block statement  no-empty
7:1   error  Empty switch statement  no-empty

no-ex-assign

try...catch 文でcatchブロック内で例外オブジェクトを上書きすることを許可しない。
 
▼ エラーコードの例

 
try {
    // code
} catch (e) {
    e = 10; // 例外オブジェクトを上書き
}

4:5  error  Do not assign to the exception parameter  no-ex-assign

no-extra-boolean-cast

不必要なboolean型の型変換を許可しない。
 
▼ エラーコードの例

 
var foo = !!!bar; // !!!bar === !bar

var foo = !!bar ? baz : bat; // !!bar === bar

var foo = Boolean(!!bar); // !!bar === bar

var foo = new Boolean(!!bar); // !!bar === bar

if (!!foo) { // !!foo === foo
    // ...
}

if (Boolean(foo)) { // Boolean(foo) === foo
    // ...
}

while (!!foo) { // !!foo === foo
    // ...
}

do {
    // ...
} while (Boolean(foo)); // Boolean(foo) === foo

for (; !!foo; ) { // !!foo === foo
    // ...
}

1:13  error  Redundant double negation  no-extra-boolean-cast
3:12  error  Redundant double negation  no-extra-boolean-cast
5:20  error  Redundant double negation  no-extra-boolean-cast
7:24  error  Redundant double negation  no-extra-boolean-cast
9:6   error  Redundant double negation  no-extra-boolean-cast
13:5   error  Redundant Boolean call     no-extra-boolean-cast
17:9   error  Redundant double negation  no-extra-boolean-cast
23:10  error  Redundant Boolean call     no-extra-boolean-cast
25:9   error  Redundant double negation  no-extra-boolean-cast

no-extra-semi

不必要なセミコロンを許可しない。
 
▼ エラーコードの例

 
var x = 5;; // セミコロンが重複

function foo() {
    // code
}; // 関数宣言にセミコロンは不要

1:11  error  Unnecessary semicolon  no-extra-semi
5:2   error  Unnecessary semicolon  no-extra-semi

no-func-assign

関数宣言として記述された関数への上書きを許可しない。
 
▼ エラーコードの例

 
function foo() {}
foo = bar; // 1行目と4行目の関数宣言fooを上書きしようとしている

function foo() {
    foo = bar; // 1行目と4行目の関数宣言fooを上書きしようとしている
}

2:1   error  'foo' is a function  no-func-assign
2:1   error  'foo' is a function  no-func-assign
5:5   error  'foo' is a function  no-func-assign
5:5   error  'foo' is a function  no-func-assign

no-inner-declarations

ネストブロック内での変数や関数宣言を許可しない。 （デフォルトでは関数宣言のみ）
 
▼ エラーコードの例

 
if (test) {
    function doSomething() { }
}

function doSomethingElse() {
    if (test) {
        function doAnotherThing() { }
    }
}

2:5   error  Move function declaration to program root        no-inner-declarations
7:9   error  Move function declaration to function body root  no-inner-declarations

no-invalid-regexp

RegExp コンストラクタ内で無効な正規表現文字列を許可しない。
 
▼ エラーコードの例

 
RegExp('[') // 「[」はエスケープが必要です。

RegExp('.', 'z') // 「z」は正規表現のフラグとして無効

new RegExp('\\')

1:1  error  Invalid regular expression: /[/: Unterminated character class  no-invalid-regexp
3:1  error  Invalid flags supplied to RegExp constructor 'z'               no-invalid-regexp
5:1  error  Invalid regular expression: /\/: \ at end of pattern           no-invalid-regexp

no-irregular-whitespace

Unicodeの特殊な空白文字を許可しない。
 
▼ エラーコードの例

 
function thing?/*<MVS>*/(){ // U+180E MONGOLIAN VOWEL SEPARATOR
    return 'test';
}

function thing() {
    return 'test';?/*<ENSP>*/ // U+2002 EN SPACE
}

1:15  error  Irregular whitespace not allowed  no-irregular-whitespace
6:19  error  Irregular whitespace not allowed  no-irregular-whitespace

no-obj-calls

グローバルオブジェクトを関数として呼び出すことを許可しない。
 
▼ エラーコードの例

 
var math = Math();
var json = JSON();

1:12  error  'Math' is not a function  no-obj-calls // Mathオブジェクト
2:12  error  'JSON' is not a function  no-obj-calls // JSONオブジェクト

no-regex-spaces

正規表現文字列の中で２文字以上の連続した空白を許可しない。
 
▼ エラーコードの例

 
var re = /foo  bar/; // 2文字の連続した空白は「/ {2}/」を使う。
var re = new RegExp("foo   bar"); // 3文字の連続した空白は「/ {3}/」を使う。

1:10  error  Spaces are hard to count. Use {2}  no-regex-spaces
2:10  error  Spaces are hard to count. Use {3}  no-regex-spaces

no-sparse-arrays

空のスロットを含む配列を許可しない。
連続したカンマはカンマのタイプミスである可能性がある。

 
▼ エラーコードの例

 
var items = [,];
var colors = [ "red",, "blue" ];

1:13  error  Unexpected comma in middle of array  no-sparse-arrays
2:14  error  Unexpected comma in middle of array  no-sparse-arrays

参考

・ESLint - Pluggable JavaScript linter（公式）
http://eslint.org/
・ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編] - Qiita　
http://qiita.com/M-ISO/items/f9097a75b362206c2a99　など

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら

Recommend

pushStateでブラウザの履歴を追加する
Google Apps Scriptを使って、スプレッドシートの内容をSlackに通知する

Google Apps Scriptを使って、スプレッドシートの内容をSlackに通知する

【jQuery】シングルページでナビゲーションに現在地を表示する
ESLintを使ったJavaScriptの検証をGitやGulpで自動化する

ESLintを使ったJavaScriptの検証をGitやGulpで自動化する