如何使用私有方法為 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

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總是引發皮棉錯誤Parsing error: This experimental syntax requires enabling the parser plugin: 'classPrivateMethods'在主題標簽#privateMethod 。

我用谷歌搜索了很多，但沒有找到我錯過了什么。

請幫忙，非常感謝。

Answer 1

你只需要安裝 babel-eslint 版本v11.0.0-beta.0 ，但正如你所看到的它的 beta 版本，但這應該適用於這種語法。

Answer 2

好的，所以我來這里分享我學到的東西，因為我花了一段時間才找到它。 查看上面配置文件的圖片，看起來您是通過為您尋求的支持實施單獨的規則來實現的，但是，有一個Babel Preset NPM 包可以支持所有 ECMAS Stage-3 Proposals，並且它的配置少了很多，你只需要知道怎么做，這就是我寫這篇文章的原因。 首先我想說，我現在可以告訴你，這不會是一個簡短的答案。 解釋所需的過程需要一些打字和我的努力。 許多指南未能成功幫助人們讓 babel 與 ESLint 同步工作的原因之一是因為用文本解釋解決方案需要一些時間。 雖然一旦解釋了，你就會看到，它非常簡單。

---

開始了：

首先，您需要確保擁有 ESLint，因此請繼續執行以下操作。

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

希望您熟悉上述命令。 如果你不是，那么你需要先去學習如何配置 ESLint。 此時你應該有一個新的eslintrc.json文件（或 YAML 等效文件），它是無規則且無插件的。 它可能擴展了 Google 或 Airbnb（我使用 Google 的 JS 樣式指南，但沒關系）。 如果 NPM 包文件，你也應該有一個新的集合，盡管我們不會使用它們。 現在我們將安裝 BABEL。 Babel，真的進步了。 過去配置 Babel 很困難 IMO，但現在他們有了一個預設模塊，這使得配置 Babel 變得更加簡單。

---

您需要下載 4 個 NPM 軟件包：

您需要的所有 Babel 模塊都作為單獨的 npm 包發布，范圍在 @babel 下（自第 7 版起）。 這種模塊化設計允許使用各種工具，每種工具都是為特定用例設計的。 在這里我們將看看@babel/core

-- BabelJS.io

有四個來自 NPM 的下載需要完成才能獲得對私有成員的支持，以及其他 ECMAScript Stage-3 提案：

1. 巴別塔本身

2. Babel 配置模塊（讓生活更輕松）

3. Babels ESLint 插件

4. 用於 ESLint 的 Babel-Parser

為了給這個答案最好的機會為您提供您需要的解決方案，我將分別介紹每個 NPM 模塊，如果出現問題，我會給您一個指向文檔的鏈接。 每個開發環境都各不相同，並且此配置可以並且很可能非常適合您正在使用的開發環境。 例如，我使用 prettier 進行格式化，這在我切換 ESLint 使用的解析器后帶來了另一組挑戰以使其工作。 如果使用資源提出。 您沒有理由不能讓 Babel 與 eslint 一起工作，並正確配置 ESLint，以便 Private-Members 和所有其他 Stage-3 ECMAScript Proposal 在您對文檔進行 lint 時不會出現錯誤。

---

（NPM DL #1）

安裝巴別：

為了獲得BABEL ，將以下命令復制並粘貼到您的終端中。

:~$ npm i -D @babel/core 

Babel/core 是不言自明的，因為 Babel 的核心功能位於@babel/core 模塊的核心。

• 官方 Babel 核心包文檔

---

（NPM DL #2）

安裝 Babel 的預設模塊

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

無需任何配置，此預設將包含支持現代 JavaScript 的所有插件。 它還包括對所有第 3 階段 ECMAScript 提案的支持。 導致我們需要 Babel 解析器的整個問題是 ESLint 的默認解析器和核心規則僅支持最新的最終 ECMAScript 標准語法，不支持實驗性語法。

• 官方@babel/preset-env 文檔

---

（NPM DL #3）

為 ESLint 安裝 Babel 解析器

:~$ npm

ESLint 允許使用自定義解析器。 使用這個插件時，你的代碼會被 Babel 的解析器解析（使用你在 Babel 配置文件中指定的配置），並且生成的 AST（對於那些不知道 AST 是抽象語法樹的人）被轉換成符合 ESTree 的結構ESLint 可以理解。 還保留所有位置信息，例如行號、列，以便您可以輕松追蹤錯誤。

注意： ESLint 的核心規則不支持實驗性語法，因此在使用 @babel/eslint-parser 時可能無法按預期工作。 對於您遇到問題的核心規則，請使用配套的 @babel/eslint-plugin 插件。

-- Babel-ESLint-Parser README.md 文檔

• Babel/ESLint 解析器 README.md 文檔

---

（NPM DL #4）

安裝 Babel 的 ESLint 插件：

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

@babel/eslint-parser 的配套規則。 @babel/eslint-parser 在調整 eslint 以與 Babel 一起使用方面做得很好，但它無法更改內置規則以支持實驗性功能。 @babel/eslint-plugin 重新實現了有問題的規則，因此它們不會給出誤報或否定。

-- @babel/eslint-plugin 存儲庫

• Babel-ESLint-Plugin Repository 的 README.md 文檔

---

以下內容已被棄用，因此是錯誤的！

npm install eslint babel-eslint --save-dev

如果您看到使用上述解決方案的解決方案，或任何其他 NPM 包名稱中沒有“@babel/...”的 NPM 包，則該解決方案已被棄用，並且可能無法正常工作。

---

配置“.babelrc”和“.eslintrc”文件

首先，我將向您展示 .eslintrc 文件應該是什么樣子，並通過注釋進行解釋。

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

現在我們終於可以創建一個“.babelrc”文件了！

我不知道我們在這個答案中所做的一切背后的所有機制，我不會假裝。 大約 8 個月前，當我用 Babel 做其他事情時，我嘗試讓 .babelrc 文件工作，但我不能。 我不得不使用 babelrc.js。 出於某種原因，我正在解釋的配置使得我們必須使用的文件是 .babelrc，這讓我很高興。

話雖如此，在您的項目根目錄中創建文件.babelrc 。 創建“...ProjectRoot/.babelrc”配置文件后，此答案的其余部分非常簡單，如下所示。

• 在您的 .babelrc 文件中粘貼以下內容：

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

就是這樣！

---

如果這個答案沒有讓 Babel 與 eslint 一起工作，為了能夠 lint 私人班級成員，或其他 ECMAS Stage-3 提案，請在下面給我留言或評論，我會保證回復。

這就是所有人！