如何使用私有方法为 ES6 类正确配置 eslint？

Question

我正在 vue 项目中编写带有私有属性/方法的 ES6 类。并使用 eslint 对代码进行 lint。下面是示例类：

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)
  }
}

vue 项目由@vue/cli 4.1.2 创建。以下是有关该项目的一些配置：

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 }]
  ]
}

包.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

{
  "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"
    ]
  }
}

问题是 eslint 总是Parsing error: This experimental syntax requires enabling the parser plugin: 'classPrivateMethods'在.hashtag 处引发 lint 错误#privateMethod。

我用谷歌搜索了很多，但没有找到我错过了什么。

请帮忙，非常感谢。

Answer 1

编辑

\n

因此，ECMAScript 发生了变化；ESLint 也是如此。

\n

幸运的是，这个改变真的是很好的！

\n

然而， ESLint不支持用于唯一命名私有字段和私有方法的TC -39 stage-4 octothorpe 语法；ESLint 添加了对新 octothorpe ( ) 语法的本机内置支持#。

\n

不再需要插件来检查在其私有字段和/或方法的名称中实现 octothorpe 语法的 JS 和/或 TS。

\n\n

！重要的！请阅读以下内容...

\n

eslint 包含“开箱即用”的支持，项目开发人员不需要做任何事情即可使其工作，但是： 您必须拥有等于v8.0的 ESLint 版本或更高版本的 ESLint 版本（在撰写本文时，版本为 8.12）。您还必须了解与 eslint 一起使用的框架、API、转译器和类型。一些模块化软件（包括我刚刚列出的实体）尚不支持 ESLint v8.0。

\n

Node.js 开发人员必须定期注意的一个小（但并非无关紧要）问题是，依赖项 \xe2\x80\x94可以说依赖项 Alpha \xe2\x80\x94 不支持最新版本另一个依赖项 \xe2\x80\x94依赖项 Beta项目使用的

\n

当“Alpha v5”不支持“Beta v10”时，NPM 包管理器会做什么，NPM 会查看 Alpha 的 package.json 项目清单以查看依赖项Beta的最新版本是什么，即依赖阿尔法可以使用。如果它发现只能使用版本 8 或更早版本，那么它将安装 Beta v8。

\n

正因为如此，许多人仍在寻找插件来支持 eslint 已获得支持的许多功能。

\n

就像所有广泛使用的软件一样。8.0 的一次重大更新打破了一切。在这种情况下，ESLint 破坏了一些东西。

\n

重要的是要知道正在做什么以及为什么这样做很重要。

\n

单击 ESLint 破坏了几件事链接。如果您遇到 ESLint v8 问题，它会向您显示损坏的不同内容。

\n

现在大多数主要插件都已经获得了对 v8 的支持，但有一些插件仍然在懈怠。这是列表，您可以查看您是否使用的插件缺乏对v8 的支持。

\n

Answer 2

您只需要安装 babel-eslint version v11.0.0-beta.0，但正如您所看到的 beta 版本，但这应该适用于此语法。