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

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

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

Answer 2

Okay so I came here to share what I learned as it took me a while to find it. Looking at the picture of the configuration file above, it looks like your doing it by implement individual rules for the support you seek, however, there is a Babel Preset NPM Package that makes it so all ECMAS Stage-3 Proposals are supported, and its a lot less configuration, you just need to know how to do it, which is why I am writing this. First I want to say that I can tell you now that this will not be a short answer. To explain the process required will take some typing, and effort on my part. One reason so many guides fail to successful help people get babel to work in sync with ESLint is because it takes a bit of time to explain the solution in text. Though once it is explained, you will see, it is pretty simple.

---

HERE WE GO:

First Off you will need to make sure you have ESLint, so go ahead and do the following.

:~$ npm init
:~$ npm i -D eslint
:~$ eslint --init 

Hopefully your familiar with the above commands. If you are not then you need to go learn how to configure ESLint first. At this point you should have a fresh eslintrc.json file (or the YAML equivalent) that is rule free and plugin'less. It probably extends Google or Airbnb (I use Google's JS style-guide, but it doesn't matter). You should also have an a fresh set if NPM package files, though we wont use them. Now we will install BABEL. Babel, has really improved. Configuring Babel in the past was difficult IMO, but now they have a preset module and it makes configuring Babel much more simple.

---

There Are 4x NPM Packages That You Will Need to Download:

All the Babel modules you'll need are published as separate npm packages scoped under @babel (since version 7). This modular design allows for various tools each designed for a specific use case. Here we'll look at @babel/core

-- BabelJS.io

There are four Downloads from NPM that need to be completed to get support for Private Members, and other ECMAScript Stage-3 Proposals:

1. Babel Itself

2. Babel Configuration Module (Makes Life Easy)

3. Babels ESLint Plugin

4. Babel-Parser for ESLint

To give this answer the best chance at giving you the solution you need, I am going to go through each NPM module separately, and Ill give you a link to the documentation in case something isn't working right. Every Development Environment varies, and this configuration can, and likely will, very on the Development Environment you are using. For example I format with prettier which posed another set of challenges to make it work after I switched the parser that ESLint was using. If you use the resources put forward. There is no reason you shouldn't be able to get Babel working with eslint, and get ESLint configured properly so that Private-Members, and every other Stage-3 ECMAScript Proposal, do not through errors when you lint your documents.

---

(NPM DL #1)

Install Babel:

In order TO GET BABEL Copy and paste the following command into your Terminal.

:~$ npm i -D @babel/core 

Babel/core is self explanatory as the core functionality of Babel resides at the heart of the @babel/core module.

• Official Babel Core Package Documentation

---

(NPM DL #2)

Install Babel's Preset Module

:~$ npm i -D @babel/preset-env

Without any configuration, this preset will include all plugins to support modern JavaScript. It also includes support for all stage-3 ECMAScript Proposals. The whole issue that caused us to need Babel's parser is that ESLint's default parser and core rules only support the latest final ECMAScript standard syntax and do not support experimental syntax.

• Official @babel/preset-env Documentation

---

(NPM DL #3)

Install Babel Parser For ESLint

:~$ npm

ESLint allows for the use of custom parsers. When using this plugin, your code is parsed by Babel's parser (using the configuration specified in your Babel configuration file) and the resulting AST (For those who don't know AST is an Abstract Syntax Tree) is transformed into an ESTree-compliant structure that ESLint can understand. All location info such as line numbers, columns is also retained so you can track down errors with ease.

Note: ESLint's core rules do not support experimental syntax and may therefore not work as expected when using @babel/eslint-parser. Please use the companion @babel/eslint-plugin plugin for core rules that you have issues with.

-- Babel-ESLint-Parser README.md Document

• Babel/ESLint Parser README.md Document

---

(NPM DL #4)

Install Babel's ESLint Plugin:

:~$ npm i -D @babel/eslint-plugin

Companion rules for @babel/eslint-parser. @babel/eslint-parser does a great job at adapting eslint for use with Babel, but it can't change the built-in rules to support experimental features. @babel/eslint-plugin re-implements problematic rules so they do not give false positives or negatives.

-- The @babel/eslint-plugin Repository

• Babel-ESLint-Plugin Repository's README.md Document

---

The Following is DEPRECATED, and THEREFORE, WRONG!

npm install eslint babel-eslint --save-dev

If you see a solution using the above, or any other NPM packages that don't have "@babel/..." in the NPM Package name, then that solution is deprecated and probably will not work.

---

Configure the '.babelrc' & '.eslintrc' Files

First I will show you what the .eslintrc file should look like, and explain it through comments.

{
  "env": {
    //  Make sure your environment is configured properly
    "es2021": true,
    "commonjs": true,
    "node": true,
    "browser": false
  },

  "extends": ["google"],
  "plugins": [
    "prettier",
    "@babel" // This is where you inform ESLint that you want to use @babel/eslint-plugin. If you have other plugins use an array.
  ],

  "parser": "@babel/eslint-parser", // He is where you communicate to ESLint that you want to use the @babel/eslint-parser.

  "parserOptions": {
    "ecmaVersion": 2021, // 12 or 2021 is the most current ECMAS Version

    "sourceType": "module", // For use with JS Modules set to module, otherwise it can be set to script

    "allowImportExportEverywhere": false, // When set to true this configuration allows import and export declarations to be placed where ever a statement can be made. Obviously your Env must support the Dynamic placement of the import/export statements for it to work.

    "ecmaFeatures": {
      "globalReturn": false // allow return statements in the global scope when used with sourceType: "script".
    }
    
  },

  "rules": {
    "require-jsdoc": "off",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "no-unused-expressions": "warn",
    "no-unused-vars": "warn",

    // These are all the rules that Babel-Plugin has support for. If the plugin will implement a rule, you should have it do so instead of using ESLint's equal rule.
    "@babel/new-cap": "error",
    "@babel/no-invalid-this": "error",
    "@babel/no-unused-expressions": "error",
    "@babel/object-curly-spacing": "error",
    "@babel/semi": "error",

    /* 
    I Omitted this rule because @Babel-Plugin offers this rule. 
    "semi": ["error", "always"],    */
   
  }
}

Finally We Can Create a ".babelrc" File now!

I don't know all the mechanics behind everything we are doing in this answer, and I won't pretend to. I tried, about 8 months ago, when doing somthing else with Babel, to get a .babelrc file to work, and I could not. I had to use babelrc.js. For some reason the configuration I am explaining makes it so the file we must use is .babelrc, which makes me very happy.

So with that said, in Your Projects Root Directory create the file .babelrc . After you create the "...ProjectRoot/.babelrc" configuration file, the rest of this answer is very simple, as you can see below.

• In your .babelrc file paste the following:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "shippedProposals": true,
        "ignoreBrowserslistConfig": true
      }
    ]
  ]
}

And that is it!

---

If this answer doesn't get Babel working with eslint, to be able to lint private-class-members, or other ECMAS Stage-3 Proposals, Message me or comment below and I will reply guaranteed.

Thats all folks!