ESLintのno-restricted-syntaxでfor-ofだけを許可

8666 ワード
JavaScript es6 lint es2015 ESLint JavaScript テキストリンク

ESLintでairbnb-baseを使ってます。 以前まで使ってました (追記参照)。

ES2015のfor-ofを使おうとすると、no-restricted-syntaxとしてエラーになってしまいます。以下の記事がとても参考になりました。
ESLint対応物語 ~no-restricted-syntax~

事情はわかりましたが、それでも僕はfor-ofを使いたい！
しかしfor-inとかは禁止で良いのでno-restricted-syntax自体を無効にはしたくない！

ってことで、for-ofだけを許可する方法です。

まずairbnb-baseの大元の設定を確認。今回はこのファイルでした。

node_modules/eslint-config-airbnb-base/rules/style.js
    // disallow certain syntax forms
    // http://eslint.org/docs/rules/no-restricted-syntax
    '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: 'ForOfStatement',
        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.',
      },
      {
        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.',
      },
    ],

この部分を自分の.eslintrcに転記して、不要な部分を削除すればOK
僕はyamlで書いてるので、分かりやすいようにコメントアウトにしてみました。

.eslintrc.yml
  # for-ofは認める
  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: 'ForOfStatement'
    #   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.'
    - 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.'

最初は「大元のno-restricted-syntaxで設定済みのselectorのうちForOfStatementだけを無効にする」のかと思ったんですが、そうではなく「自分でno-restricted-syntaxを書いた場合は大元のno-restricted-syntaxは全部キャンセルされて自分の設定だけが使われる」ということなんですね。

no-restricted-syntaxだけでなく、他のルールでも同様なはず。たぶんESLint自体の仕様として誰かがまとめてるとは思うんだけど、見つからなかったです

ではまた。

2017/10/31 追記

airbnb-baseのルールは厳しすぎて、本件以外にも色々と面倒臭い要素が多くて時間をどんどん浪費することに気づきまして、使うのやめました！

今はstandard使ってます。何より「セミコロン書かない」ってところに惚れました！もうね、セミコロン書かないだけで効率が全然上がる(笑)