如何使用私有方法正确配置ES6类的eslint?

问题描述

我正在用vue项目编写具有私有属性/方法的ES6类.并使用eslint整理代码.下面是示例类:

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

vue项目由@ vue/cli 4.1.2创建.这是有关项目的一些配置:

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

babel.config.js:

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:

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

.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
  }
};

问题在于eslint总是引发皮棉错误解析错误:此实验性语法要求在 #privateMethod 的标签上启用解析器插件:'classPrivateMethods'.

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

我在Google上搜索了很多，但是找不到我错过的内容.

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

请帮助，非常感谢.

推荐答案

您只需要安装babel-eslint版本 v11.0.0-beta.0 ，但是您可以看到其beta版本，但应该适用于这种语法.

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.

这篇关于如何使用私有方法正确配置ES6类的eslint?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！