How to configure eslint for ES6 class with private methods correctly?

Question

I was writing ES6 class with private properties/methods in vue project. And using eslint to lint the code. Below is the example class:

class TestClass {
  constructor(value) {
    this.#privateProperty = value
    this.#privateMethod(this.#privateProperty)
  }

  #privateProperty = undefined

  // lint error raised at below line
  #privateMethod(value) {
    this.e = value
    console.log(this.e)
  }
}

The vue project is created by @vue/cli 4.1.2. And here are some configures about the project:

babel.config.js:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-private-methods', { loose: true }]
  ]
}

package.json:

{
  "name": "demo-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "cesium": "^1.64.0",
    "core-js": "^3.4.4",
    "mockjs": "^1.1.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.8.0",
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "copy-webpack-plugin": "^5.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.5"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["eslint:recommended", "plugin:vue/recommended", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)"
      ],
      env: {
        jest: true
      }
    }
  ],
  globals: {
    'process': true
  }
};

The problem is that eslint always raises lint error Parsing error: This experimental syntax requires enabling the parser plugin: 'classPrivateMethods' at hashtag of #privateMethod.

I googled a lot but fail to find out what I have missed.

Please help, and thanks very much.

Answer 1

EDIT

ECMAScript has changed, consequently; so has ESLint.

Fortunately, the change is really good one!

ESLint DIDN'T SUPPORT the TC-39 stage-4 octothorpe Syntax used to uniquely-name private-fields, and private-methods, however; ESLint has added native built-in support for the new octothorpe (#) syntax.

No longer is a plug-in needed to lint JS &/or TS that implement the octothorpe syntax in the names of their private fields &/or methods.

---

!IMPORTANT! Please Read the Following...

Support is included "out-of-the-box" with eslint, and nothing is required of the project's developer to make it work, HOWEVER: you have to have a version of ESLint that is equal to v8.0 or newer (at the time of writing this the version is 8.12). You also have to be aware of the Frameworks, API's, transpilers, and typings that you use with eslint. Several pieces of modularization software, included the entities I just listed, do not support ESLint v8.0 yet.

A small (but not insignificant) issue that Node.js developers have to be aware of on a regular basis is when a dependency — lets say Dependency Alpha — doesn't support the newest version of another dependency — Dependency Beta — that's used by the project.

What the NPM package manager does in a situation, when "Alpha v5" doesn't support "Beta v10", is NPM looks at Alpha's package.json project manifest to see what the newest version of dependency Beta is, that dependency Alpha can use. If it sees that it can only use versions 8 or older, then it will install Beta v8.

Because of this, many people are still looking for plugins to support many features that eslint has gained support for.

Like all widely used pieces of software. A major update, which 8.0 was, breaks things. in this case ESLint broke several things.

Its important to know what is doing what, and WHY it is doing it, in all aspects of software development & computer science.

Click the ESLint broke several things link. It shows you different stuff that broke if you having an ESLint v8 issue.

Most of the major plugins have gained support for v8 now, but a few are slacking still. Here is the list, u can see if you are using a plugin that is lacking support for v8.

Answer 2

You just need to install babel-eslint version v11.0.0-beta.0, but as you can see its beta version but that should work for this syntax.