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

コメント

タイトルとURLをコピーしました