如何启用 ESLint classPrivateMethods 解析器插件？答案

【问题标题】：How do I enable ESLint classPrivateMethods parser plugin?如何启用 ESLint classPrivateMethods 解析器插件？
【发布时间】：2019-05-09 14:08:31
【问题描述】：

我正在尝试将 @babel/plugin-proposal-private-methods 插件与 ESLint 一起使用，但是，任何使用新功能的代码都会导致此错误：

ESLint：解析错误：此实验性语法需要启用解析器插件：'classPrivateMethods'

根据这个错误消息，应该在哪里启用这个插件并不是很明显，而且我找不到任何关于如何将“解析器插件”添加到我的.eslintrc 的说明（如下所示）。

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "jquery": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "plugins": [
        "react"
    ],
    "parserOptions": {
        "sourceType": "script",
        "ecmaVersion": 6,
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "camelcase": 0,
        "curly": 0,
        "wrap-iife": [
            2,
            "any"
        ],
        "linebreak-style": 2,
        "comma-style": [
            2,
            "last"
        ],
        "new-cap": 2,
        "strict": [
            2,
            "function"
        ],
        "no-undef": 2,
        "no-unused-vars": 0,
        "no-console": 0,
        "react/prop-types": 0
    }
}

如何启用此解析器插件？

【问题讨论】：

标签： javascript babeljs eslint

【解决方案1】：

在 babel-eslint 存储库中有一个问题：https://github.com/babel/babel-eslint/pull/523

最近已解决，修复发布于babel-eslint@11.0.0-beta.0source

一旦babel-eslint@11.0.0 可用，你就可以升级，插件将从你的 Babel 配置文件中加载。

// babel.config.js
module.exports = {
  plugins: [
    "@babel/plugin-proposal-private-methods"
  ]
};

【讨论】：

babel-eslint 软件包版本11.0.0 仍然不可用，但最新的测试版是11.0.0-beta.2
babel-eslint 现在是 @babel/eslint-parser。配置可以直接放到.eslintrc.js：module.exports = { parserOptions: { babelOptions: { plugins: ["@babel/plugin-syntax-class-properties"]}}};

【解决方案2】：

现在是 10 月，但 babel-eslint@11.0.0 还没有发布。同时，您可以应用以下目前对我有用的解决方案

安装这些包
- @babel/plugin-proposal-class-properties
- @babel/plugin-proposal-private-methods
- @babel/eslint-parser
启用classPrivateProperties 和classPrivateMethods .eslintrc.json 或你的 package.json (eslintConfig)
更改.eslintrc.js 中的解析器

结果：

我现在可以在我的代码中使用私有方法而不会出现 eslint 错误

husky 预提交钩子也可以工作

如果您在实施此解决方案时遇到任何问题，请随时发表评论。

和平！

【讨论】：

效果很好，除了现在 ESLint 不会自动修复任何东西。
绝对不适合我。 classPrivateProperties/Methods 插件从何而来？它们是 Babel ESLint 解析器内部的吗？
嗨@igorsantos07，不确定我是否理解正确，但您需要先安装这两个包，正如我在步骤#1 @babel/plugin-proposal-class-properties 中提到的那样； @babel/plugin-proposal-private-methods。然后你可以在你的 .eslintrc.json 或你的 package.json 中启用这些插件在步骤#2
根据docs es6 自动将ecmaVersion 解析器选项设置为6。这与您的eslintrc 中的ecmaVersion 不一致。您是否想用es2020 替换es6 并删除显式ecmaVersion？
注意：es2021 似乎不需要plugins 行。

【解决方案3】：

多年后... 根据@Nidust 的回答，我意识到我们需要更多步骤：

安装这些包：(+ @babel/core)
npm i @babel/core @babel/eslint-parser @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods -D

编辑或创建.eslintrc.json 文件：

{
    ...
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        ...
        "babelOptions": {
            "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
        }
    }
}

您还需要一个.babelrc（至少是空的）文件：
```
{}
```

快乐！ :)

这是我完整的 .eslintrc.json 文件，带有 airbnb 配置：

{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module",
        "babelOptions": {
            "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
        }
    },
    "rules": {
        "import/extensions": ["error", "always", { "ignorePackages": true} ]
    }
}

VS 代码：

【讨论】：

【解决方案4】：

对我有用的是安装 babel-eslint@11.0.0-beta-2 并更改我的 eslint 配置。

这是我在 package.json 中的 eslint 配置：

  "eslintConfig": {
    "extends": "eslint:recommended",
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "plugins": [
      "classPrivateMethods",
      "babel"
    ],
    "env": {
      "node": true
    },
    "rules": {
      "no-console": 0,
      "no-unused-vars": 1,
      "babel/semi": 1
    }
  }

重要的是设置你的"parser":"babel-eslint"，然后设置你的"plugins":["classPrivateMethods","babel"]

【讨论】：