動かざることバグの如し

近づきたいよ 君の理想に

イキって新記法書くとESLintでエラーになる問題

nodejs

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には０〜４のわたる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

でおｋ

参考リンク

最後に

f:id:thr3a:20190919232856j:plain