eslintやってみたら「Parsing error: Parenthesized pattern」エラー表示。⇒単なる設定ミスだった。

概要

初めてEslintしてみたら
「Parsing error: Parenthesized pattern」って出たよ。なぜ？
⇒単なる「設定ミスによる解析エラー」です、
って話。

"Parenthesized pattern" でググっても辿り着けなかったので記載する。
⇒「Parsing error」が本質。そりゃー、たどり着けないわ。

※この記事は、自分自身へのメモが目的です。

現象

「eslint --init」で、こんな感じに設定した後の話。

VSCodeにEslintプラグインを入れてみたら、アロー関数表記のところで、
「Parenthesized pattern」と出た。なんじゃこりゃ？

コマンドラインから、「eslint 対象ファイル.js」ってやると、その行数のところで、
「Parsing error: Parenthesized pattern」って同じエラー表示が出た。
なんじゃこりゃ？

※初めてEslint入れる＆VSCodeからの利用が目的、の場合の手順は以下のページに従って行った。分かり易くて良い。
https://garafu.blogspot.jp/2016/12/vscode-eslint.html

原因と解決方法

原因は「Eslintの設定を"ES5"にしておきながら、ES6で新導入されたアロー関数を使ってたので、Eslintがパースエラーした」だった。そりゃー、エラーするわ。

解決方法は、「Eslintの設定を"ES6"にする」だけ。これで、アロー関数の部分も正しく解釈される（そしたら、セミコロン抜けとか、もろもろのエラーが正しく出ましたよ、っと）。

当初にES5で設定した理由？→「基本的にはES5で書いてるつもり」だったから。実際は、一部にES6の記法も混在したので、今回のエラー表示につながった。

Eslintに対する設定は、たとえ普段ES5で書いてるつもりでも、明確に「ES5の範囲しか使わない！」でない限りはES6で設定するのが良いみたい（＾＾；）。なお、ES6に設定後のEslintのコマンドライン結果は以下。へー、こんな感じになるのね。

  103:30  error  'reject' is defined but never used        no-unused-vars
  121:30  error  'reject' is defined but never used        no-unused-vars
  181:51  error  Missing semicolon                         semi
  202:31  error  'reject' is defined but never used        no-unused-vars
  209:5   error  Missing semicolon                         semi
  211:2   error  Missing semicolon                         semi
  240:48  error  'err' is defined but never used           no-unused-vars

Eslintの設定メモ

結局、以下のように設定を変更した。当初の「eslint --init」で生成したに内容に対する変更箇所は以下。

• 「"es6": true」を追加。
• 「"indent"」を「off」った。
• 「"quotes"」を「error → wran」へ変更。

.eslintrc.json

{
    "env": {
        "es6": true,
        "browser": true,
        "commonjs": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [
            "off",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "warn",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

参考サイト

Eslint自体の設定ファイルの意味は、公式サイトの解説が分かり易い。下手に彷徨わず、この公式ページを見るのが良さげ。

• rulesのerror, warn, offの意味など。https://eslint.org/docs/user-guide/getting-started
• 定義されているrulesの内容。https://eslint.org/docs/rules/