Eslint 无法识别使用 nodejs 12 的私有字段声明答案

【问题标题】：Eslint does not recognize private field declaration using nodejs 12Eslint 无法识别使用 nodejs 12 的私有字段声明
【发布时间】：2019-12-14 13:02:25
【问题描述】：

Eslint 不会识别类声明中标记为 # 的私有字段，即使我使用的是 NodeJS 版本 12（支持它们）。

我正在运行 NodeJS v12.7.0。我搜索了所有 DuckDuckGo 和 Google，但在 eslint 中找不到一个插件或选项，它会告诉它接受私有字段符号 (#)。我将emca 设置为版本10。

class MyClass {
   #foo = 'bar';
   #bar = 'foo';

   constructor(foo, bar) {
      this.#foo = foo;
      this.#bar = bar;
   }
   ...
};

当我在上面的代码上运行eslint 时，我得到：

2:3 error Parsing error: Unexpected character '#'

我正在处理的项目不使用 Babel，我不想仅仅为了让私有字段工作而包含它。任何想法如何在不使用 Babel 的情况下完成这项工作？

（当然没有反对 Babel，只是在这个特定的项目上我不想要它）。

【问题讨论】：

标签： node.js eslint private private-members

【解决方案1】：

我认为你可能不得不硬着头皮使用babel-eslint:https://github.com/babel/babel-eslint，这需要你安装babel/core@>=7.2.0

尽管私有类字段包含在节点 12 中，但根据 spec（截至 2019 年 8 月），它仍然是第 3 阶段的实验功能

npm install eslint babel-eslint --save-dev
# or
yarn add eslint babel-eslint -D

并添加

  "parser": "babel-eslint",

到您的.eslintrc.js 文件

【讨论】：

感谢您的回复，米哈尔。我今天会试试这个。
顺便说一句，这行得通！无缝插入。非常感谢！

【解决方案2】：

赞成的答案有点过时，babel-eslint 包已经改变，而且，你需要确保你也配置了 Babel，在我的情况下，我在服务器上，所以不是。

我在这里写了关于解决方案的博客： https://dev.to/griffadev/setting-up-eslint-to-work-with-new-or-proposed-javascript-features-such-as-private-class-fields-5fm7

TL;DR:

npm i eslint @babel/core @babel/eslint-parser @babel/preset-env -D

示例.eslintrc

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
}

配置.babelrc

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

如果你使用 Jest 并且你还没有配置 .babelrc，它将开始选择这个新文件，这可能是个问题。您可以通过将 .babelrc 文件重命名为其他文件并更新 eslint 配置文件来解决此问题：

"babelOptions": {
    "configFile": "./.babel-eslintrc"
 }

【讨论】：

我按照你博客上的方法。遇到并解决了一个问题。在将 "shippedProposals": true 添加到 .babelrc 的部分，我复制并粘贴了对象并得到错误：``` 0:0 错误解析错误：.presets[0][2] must be a string, or undefined`` ` 我得到这个的原因是因为我已经在数组中有一个对象，并且我将新对象作为第三个元素复制到了数组中。在这种情况下，正确的做法是将"shippedProposals": true 作为键：值添加到预先存在的对象上。

【解决方案3】：

关于 Visual Studio 2019，我发现 @babel/eslint-parser 不适用于它，但较旧的 babel-eslint 可以。根据@George 的回答进行其他设置。

截至回答时的 Visual Studio 2019 版本：16.9.5

【讨论】：

【解决方案4】：

除非你真的，真的想要那个特定的文件，我会避免添加新的依赖项只是为了让测试通过。在这种情况下，我的建议是添加

ignorePatterns: ["path/to/file(s).js"],

在您的.eslintrc.js 文件中。这将避免 linting 该特定文件。如果您真的想要对其进行 lint，请将 # 替换为 __、lint，然后将其改回。我知道，这是一个 hack，但它不会引入任何类型的依赖，而且它可以工作。

【讨论】：

【解决方案5】：

2021 年更新：你不再需要 babel！

你可以简单地将 eslint 更新为v8.0.0 及以上。

查看 eslint 发行说明：https://eslint.org/blog/2021/10/eslint-v8.0.0-released#highlights

确保这是在您的 .eslintrc 文件或类似文件中：

{
    "parserOptions": {
        "ecmaVersion": 13
    }
}

您也可以只使用 latest 而不是专门的版本 13。

【讨论】：

谢谢！我会试试这个并告诉你。