ESLint 1.0.0新ルールまとめ

More than 3 years have passed since last update.

こんにちは、@armorik83です。ESLint 1.0.0がリリースされました(今朝Twitterで気付いた)。以前.eslintrcを晒したあとあまり面倒を見てなかったので、これを機に動向を追ってみました。

1.0.0新ルールまとめとしましたが、前回の記事以降にリリースされたv0.21.0からv0.24.0も扱います。全ての変更点やBreaking Changeは扱わず、新ルールだけ取り上げます。


v0.21.0 (May 10)


https://github.com/eslint/eslint/releases/tag/v0.21.0



dot-location

http://eslint.org/docs/rules/dot-location

var a = universe.

galaxy;

var b = universe
.galaxy;

私はb派。


no-unneeded-ternary


http://eslint.org/docs/rules/no-unneeded-ternary


// Bad

var isYes = answer === 1 ? true : false;

// Good
var isYes = answer === 1;

その三項演算子要る?っていう指摘。


linebreak-style


http://eslint.org/docs/rules/linebreak-style


// option 'unix'

var a = 'a';\r\n

// option 'windows'
var a = 'a';\n

面倒なところも面倒みてくれる。


--init


http://eslint.org/docs/user-guide/command-line-interface#options


CLIに--initが追加されました。今まで他人のコピペなどで下地作りをすることが多かったと思いますが、取っ付き易くなりました。ルールではないですが重要な新機能として。


v0.22.0 (May 31)


https://github.com/eslint/eslint/releases/tag/v0.22.0



object-curly-spacing


http://eslint.org/docs/rules/object-curly-spacing


var obj = {foo: "bar"};

var obj = { foo: "bar" };

var obj = {foo: {zoo: "bar"}};
var obj = { foo: { zoo: "bar" } };

わかる。これバラついたり、他の担当者のソース確認しにいったりしますよね。


lines-around-comment


http://eslint.org/docs/rules/lines-around-comment


var night = "long";

/* what a great and wonderful day */

var day = "great"

var night = "long";

/* what a great and wonderful day */
var day = "great"

これもわかるなぁ。


accessor-pairs


http://eslint.org/docs/rules/accessor-pairs


// Bad

var o = {
set a(value) {
this.val = value;
}
};

// Good
var o = {
set a(value) {
this.val = value;
},
get a() {
return this.val;
}
};

アクセサがペアで用意されているかも面倒見られるようになりました。


no-empty-character-class


http://eslint.org/docs/rules/no-empty-character-class


no-empty-classはdeprecatedとなりました。


v0.23.0 (Jun 15)


https://github.com/eslint/eslint/releases/tag/v0.23.0



prefer-const


http://eslint.org/docs/rules/prefer-const


let a = 3;

console.log(a);

再格納してないならconstでよくね?という指摘。これを待っていた!


spaced-comment


http://eslint.org/docs/rules/spaced-comment


// This is a comment with a whitespace at the beginning

//This is a comment with no whitespace at the beginning

有りそうで無かった。


v0.24.0 (Jun 27)


https://github.com/eslint/eslint/releases/tag/v0.24.



no-unexpected-multiline


http://eslint.org/docs/rules/no-unexpected-multiline


主にケツセミコロン絡み。ニッチな需要がありそうな箇所。


constructor-super, no-this-before-super


http://eslint.org/docs/rules/constructor-super

http://eslint.org/docs/rules/no-this-before-super


super()絡み。今までもBabelが警告していましたが、IDE・エディタレベルで早期発見ができて嬉しい。


array-bracket-spacing


http://eslint.org/docs/rules/array-bracket-spacing


var arr = [ 'foo', 'bar' ];

var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar'];
var arr = [[ 'foo' ], 'bar'];

object-curly-spacingに続いてArray版。


v1.0.0 (Aug 1)


http://eslint.org/blog/2015/07/eslint-1.0.0-released/


ようやくv1.0.0の話です。rc.1とかrc.2とかは無視して、stableにまとめます。1.0.0から「全てのルールの初期値はOffとなる」というBreaking Changeが入ったので、0.x系の方は"Migrating to v1.0.0"を読んで備えてください。


arrow-parens, arrow-spacing


http://eslint.org/docs/rules/arrow-parens

http://eslint.org/docs/rules/arrow-spacing


@Jxck_先生案件が本採用されました!


callback-return


http://eslint.org/docs/rules/callback-return


function foo() {

if (err) {
callback(err); // ここreturn要るよね?
}
callback();
}

return漏れを見つけます。callback-return: [2, ["callback", "cb", "next"]]といったオプションでreturnを期待する引数名を宣言できる。


id-length, id-match


http://eslint.org/docs/rules/id-length

http://eslint.org/docs/rules/id-match


変数名の長さ、変数名の正規表現match。ありそうでなかった。"id-length": [2, {"min": 3, "max": 10, "exceptions": ["i"]}]などで1文字変数名も例外的に許容できるのがエラい。


init-declarations


http://eslint.org/docs/rules/init-declarations


varletの宣言タイミングについて。常時const派なので使わなさそう。


no-class-assign


http://eslint.org/docs/rules/no-class-assign


classに再格納なんてやめてください。


no-const-assign


http://eslint.org/docs/rules/no-const-assign


個人的大本命!const宣言した変数への再格納を禁止できます。これを待ってたよー!


no-implicit-coercion


http://eslint.org/docs/rules/no-implicit-coercion


var b = !!foo;

var b = ~foo.indexOf(".");
var n = +foo;
var n = 1 * foo;
var s = "" + foo;

JSでの型キャストなど、初学者がとっつきにくい記法を扱えます。


no-invalid-this


http://eslint.org/docs/rules/no-invalid-this


JSのややこしいthisをより強固に検出できる。


no-useless-call, prefer-reflect


http://eslint.org/docs/rules/no-useless-call

http://eslint.org/docs/rules/prefer-reflect


.call().apply()といった複雑そうにみえる箇所について。うっ…Reflect不勉強でした。


prefer-spread


http://eslint.org/docs/rules/prefer-spread


var args = [1, 2, 3, 4];

Math.max.apply(Math, args);

var args = [1, 2, 3, 4];
Math.max(...args);

また.apply()絡み。ES 2015のSpread operatorを積極的に使おうというオプションは学習用途にも良い。


require-yield


http://eslint.org/docs/rules/require-yield


Generatorにyieldが無ければ警告。まだ不慣れなのでありがたい。


感想

@mysticatea先生無双でした!

今回はES 2015構文についての検証が豊富で、前回の構築時(5月)から3ヶ月でえらい整った印象です。3ヶ月程度で.eslintrcを見直さないと腐ってしまうと学べました。prefer-.*はES 2015のベストな書き方を推奨する優秀なオプションで心強いです。どんどん使っちゃいましょう。

それでは快適なES 2015ライフを!