ESLintでPrivate Class Field使うとエラーになる問題
Nodejs v12でようやくクラスでプライベートな変数を持つことができる。
変数が #val
のように頭に#をつけるので、初見キモいなって思ったけど以下の詳しい経緯見たら納得した
例えば以下のようなJSコード #count
がいわゆるプライベートなインスタンス変数になってる。
class IncreasingCounter { #count = 0; get value() { console.log('Getting the current value!'); return this.#count; } increment() { this.#count++; } } const counter = new IncreasingCounter(); // counter.#count; // is Error counter.increment(); console.log(counter.value); // print '1'
じゃあ早速これを導入してコード書こうとしたらESLint様に怒られた。。。
理由
単純でESLintが対応してないため が、別にバグでもなく、ESLintがルールの追加をサボってるわけでもない。ちゃんと理由がある。
ESLintはECMAScript(Ecma Internationalによって標準化されてるJavaScriptの仕様)に則っており、Private Class Fieldも当然ECMAScriptで採用された新ルールである。
じゃあESLint対応しろよって話だが、実はECMAScriptには0〜4のわたるStageという概念がある。詳しくは以下リンク(投げ
Stage 4: Finished
が本採用というかゴールであり、ESLintはStage4にならないと実装しない
で、Private Class Fieldというと、、、、まさかの「Stage 3」
悲しい、、
が、エラー出っぱなしなのも気持ち悪いので、なんとかして対応してみた
方法
やり方だが、ESLintだけだとエラーになってしまう以上、babel-eslintでエラーにならないように変換するしかない。
まずはインストール
yarn add babel-eslint
そして .eslintrc.ymlに以下を追加(jsとかJSONならそれに呼応するフォーマットで書く
parser: "babel-eslint"
するとエラーが出なくなる。当然だがBabelで今までの記法に変換してそのコードがESLintでチェックされるのであって、Private Class Fieldのような新記法が添削されるわけではないので注意
が、
なぜかVSCodeのESLintプラグインだと認識してくれない。。。
と思ってたら解決。どうやらESLintのエラーではなくVSCode組み込みのJSバリデーションエラーに引っかかってたっぽい。
"javascript.validate.enable": false
でおk
参考リンク
- Parsing error: Unexpected character '#' · Issue #11677 · eslint/eslint
- javascript - VSCode Linter ES6 ES7 Babel linter - Stack Overflow