eslint-config-airbnb-baseでfor of構文を使う

結論

以下を.eslintrc.jsに書く。

.eslintrc.js

const airbnbBaseStyle = require("eslint-config-airbnb-base/rules/style");

module.exports = {

  "rules": {
    …,
    
    "no-restricted-syntax": airbnbBaseStyle.rules[
      "no-restricted-syntax"
    ].filter(
      (value) =>
        typeof value === "string" || // 'error'
        value.selector !== "ForOfStatement"
    ),
    
    …,
  }
};

上記はeslint-config-airbnb-configのno-restricted-syntaxに変更が発生してもある程度は追従できそう。が、可読性悪いので、個人的にはコピペで以下でもいい気がしている。

.eslintrc.js

"no-restricted-syntax": [
  'error',
  {
    selector: 'ForInStatement',
    message: 'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
  },
  {
    selector: 'LabeledStatement',
    message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
  },
  {
    selector: 'WithStatement',
    message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
  },
],

背景など

eslint-config-airbnb-base(または、eslint-config-airbnb)でfor of構文を使うとno-restricted-syntaxルールで制限されているため、怒られる。

https://github.com/airbnb/javascript/blob/38f1488918ef19f56191e855f624fa5da988d547/packages/eslint-config-airbnb-base/rules/style.js#L338-L358

理由は、messageの部分に書かれている。

iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.
イテレーター/ジェネレーターはとても重いregenerator-runtimeが必須なため、許可できない。
配列のイテレーション機能を選択してループの利用は避けるべき。

が、最近のモダンブラウザーやNode.jsでfor of構文はトランスパイルせずに使えるし、配列のイテレーションだと繰り返しの途中で終わりたい場合などにスッキリ書けないこともあるので、eslint-config-airbnb-baseの上記設定は個人的には合わない次第でした。