Eslint 不允许静态类属性答案

【问题标题】：Eslint does not allow static class propertiesEslint 不允许静态类属性
【发布时间】：2020-05-19 15:48:48
【问题描述】：

我目前正在 Node 12.14.1 上开发 API，并使用 Eslint 帮助我编写代码。不幸的是，它不允许我设置 静态类属性，如下所示：

class AuthManager {
  static PROP = 'value'
}

给出以下错误：Parsing error: Unexpected token =eslint

JS 和 Node 上已经支持静态类属性。
如何禁用此规则？

我还有以下.eslintrc.json 文件：

{
  "env": {
      "es6": true,
      "node": true
  },
  "extends": "eslint:recommended",
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
  }
}

【问题讨论】：

标签： javascript node.js eslint class-fields

【解决方案1】：

带有默认解析器的 ESLint 目前不支持类字段语法。您可以通过将配置的解析器更改为babel-eslint来解决问题。

npm install --save-dev babel-eslint

// eslintrc.json
{
  "parser": "babel-eslint",
  ...
}

Eslint 的默认解析器 Espree 不支持类字段，因为该语法当前处于第 3 阶段，并且决定在 Espree 中仅支持第 4 阶段的提案。

【讨论】：

谢谢！设置babel-eslint后问题解决了。
babel-eslint 现在是 @babel/eslint-parser。
根据developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…，自节点 6 起支持静态。我正在使用节点 14，这是最新的稳定 LTS 版本。我不太清楚 ESLint 不支持它的原因是什么。
@Kostanos 根据TC39 Finished Proposals，Class Properties 是一个完成的提案，包含在 ES2022 中。同时，ESLint 7.x 官方最高支持ES2020。这就是为什么你必须使用@babel/eslint-parser。 Babel ESLint Parser 涵盖了 ESLint 默认解析器不支持的所有实验性语法 (lists here)。

【解决方案2】：

ESLint v8 现在原生支持静态类属性：https://eslint.org/blog/2021/10/eslint-v8.0.0-released

parserOptions ecmaVersion 应设置为 13, 2022 或“最新”以启用支持。

【讨论】：

自 v8 发布以来，这是现在的“正确”答案。
出于某种原因，我在 8.6.0 上仍然遇到同样的错误。不确定我是不是唯一一个，但如果有人读到这篇文章，请知道你不是……
FWIW，我最终不得不使用其他答案中指定的@babel/eslint-parser。试图避免在任何地方使用 babel。但是，至少它仍然有效。

【解决方案3】：

你需要安装@babel/eslint-parser:

yarn add --dev @babel/eslint-parser

例如，将解析器放在您的 .eslintrc.yml 中：

parser: "@babel/eslint-parser"

【讨论】：

【解决方案4】：

到目前为止，我不得不使用这些配置

.eslintrc.js

module.exports = {
  env: {
    node: true,
    es6: true,
  },
  extends: [
    'airbnb-base',
  ],
  parser: '@babel/eslint-parser',
  parserOptions: {
    babelOptions: {
      configFile: './.babelrc',
    },
    ecmaVersion: 2018, // needed to support spread in objects
  },
  plugins: ['@babel'],
};

.babelrc

{
  "presets": ["@babel/env"],
  "plugins": [
    "@babel/plugin-syntax-class-properties"
  ]
}

我必须为此安装：

npm i -D @babel/preset-env
npm i -D @babel/eslint-parser
npm i -D @babel/eslint-plugin
npm i -D @babel/plugin-syntax-class-properties

请注意，上面的 @babel 模块是我的 package.json 中唯一的 @babel 模块。

【讨论】：