【JavaScript】パブリックフィールドとプライベートフィールドの宣言をbabel-eslintでlintに対応させる方法

事象

lintで以下のエラーが発生する。

error  Parsing error: Unexpected token =

class Hoge {

  /**
   * @type {Array}
   */
  hoge = null;
}

何が起きているか

JavaScriptで標準化が完了していない機能はeslintに対応していません。

github.com

今回の例で言うと、この機能が該当します。

developer.mozilla.org

パブリックフィールドとプライベートフィールドの宣言は JavaScript 標準委員会の TC39 で提案されている実験的機能（ステージ 3）です。ブラウザでのサポートは限られていますが、この機能はBabelのようなシステムでのビルドステップを通して使用できます。

と記載の通り、「 パブリックフィールドとプライベートフィールドの宣言」はステージ3なので、eslintには対応していません。

対応方法

babel-eslintを使います。

github.com

インストール

基本readmeの通りなのですが、

$ npm install eslint babel-eslint --save-dev
# or
$ yarn add eslint babel-eslint -D

.eslint.js（.eslintrc.jsonでも同じ。使っている設定ファイルの種類によって調整してください）

{
  parser: "babel-eslint"
}

vue.jsの場合

上記設定だと以下のエラーが発生します。

  1:1  warning  Use the latest vue-eslint-parser. See also https://vuejs.github.io/eslint-plugin-vue/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  XXXXXXX
  1:1  error    Use the latest vue-eslint-parser. See also https://vuejs.github.io/eslint-plugin-vue/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  XXXXXXX

エラーコメントに書いてあるリンクに答えが書いてあります。

vuejs.github.io

 "parserOptions": {
    "parser": "babel-eslint"
 }

こんな感じでparserOptionsの中に入れてあげてください。

まとめ

jsの新しめの機能を、「お、便利そうじゃーん」と気軽に使うとこの事象に当たる場合があると思います。参考にしてみてください。