📝

ESLint 1.0.0新ルールまとめ

2021/07/04に公開約5,500字

こんにちは、@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 ライフを!

Discussion

ログインするとコメントできます