JavaScript
React
ESLint

ESLintで Parsing error: Unexpected token = となる場合の対処法

2018/2/1
誤った理解でしたのでタイトルと内容を修正いたしました。
@mysticatea さんご指摘ありがとうございました!

事象

以下のようなコードに対して、ESLintを掛けた所、

Example.jsx
class Account extends React.PureComponent {
  // ここでパースエラー
  handleOpenAddDialog = () => {
    this.setState({ isAddDialogOpen: true })
  }
}
Parsing error: Unexpected token =

というerrorが発生した。

原因

  • ESLint標準のパーサーでは、まだ標準化されていないクラスフィールド構文は扱えないため

解決方法

babel-eslintをパーサーに指定することにより、解決できる。

npm install babel-eslint --save-dev

を実行。

そして、.eslintrc.jsonに "parser": "babel-eslint"を加筆

.eslintrc.json
{
    "parser": "babel-eslint",
    // 以下、設定が続く…
}

そして、ESLintを実行すればパースエラーがなくなる。

./node_modules/.bin/eslint --ext .js --ext .jsx ./

参考にさせて頂いた記事

babel な ESLint の設定をがんばった