ESLintのカスタムルールでin+配列を禁止しよう

なぜin+配列を禁止するのか？

Pythonで

Python

>>> 0 in [1,2]
False
>>> 1 in [1,2]
True

となり、JavaScriptで

JavaScript

> 0 in [1,2]
true
> 1 in [1,2]
true

となるので、間違いやすい。

このルールの正しいコードの例は

JavaScript

> [1,2].includes(0)
false
> [1,2].includes(1)
true

となる。

ESLintにin+配列を禁止するルールがない。

ESLintのカスタムルールを作ってin+配列を禁止しよう。

禁止する方法

.eslintrc.js の rules に "no-in-array": "error" を追加。

rules フォルダーに no-in-array.js を作成。

動作確認

test.js

const k = [1, 2];

console.log(1 in [3, 4]); // エラー

for (const i in [5, 6]) // エラーなし
    for (const j in [7, 8]) // エラーなし
        console.log(i in k, j); // エラー

> eslint --rulesdir rules test.js

  4:13  error  in + array is a troublemaker                 no-in-array
  8:21  error  in + array is a troublemaker(variable init)  no-in-array

--fix にも対応した。

> eslint --rulesdir rules test.js --fix

test.js

const k = [1, 2];

console.log([3, 4].includes(1)); // エラーなし

for (const i in [5, 6]) // エラーなし
    for (const j in [7, 8]) // エラーなし
        console.log(k.includes(i), j); // エラーなし

for (const i in [5, 6])が文字列型で"0", "1"を返し[1, 2].includes("1")がfalseになることも間違いやすい。

参考にしたサイト

ESLint のカスタムルールを作ろう! (その1) - Qiita
書いて覚える ESLint ルールの作り方：キマリは通さない - Qiita
Working with Rules - ESLint - Pluggable JavaScript linter

おわりに

ESLintに追加されたら嬉しい。