概要
初めて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」へ変更。
{
"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/