Eslint不允许使用静态类属性。

Question

我目前正在使用 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"
  }
}

- Lucas Fabre

Answer 1

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

为启用此功能，parserOptions ecmaVersion应设置为13、2022或“latest”。

将此添加到您的.eslint.(cjs | json | js)文件中。

{
  parserOptions: {
    ecmaVersion: 2022,
  }
}

- Majix

---

自从v8发布以来，这现在就是“正确”的答案。 - Andrew Murphy

以下是您需要添加到eslintrc配置文件中（针对JSON文件）的配置内容：{ "parserOptions": { "ecmaVersion": "latest" } }注意：本翻译尽可能采用通俗易懂的语言，但不改变原意。 - adrienv1520

我尝试过这个，因为我正在使用@typescript-eslint/parser，但是它不起作用。我使用的是eslint@8.11.0。 - Pengő Dzsó

我确认它可以在 node 12，eslint 8.15 中正常工作。我只是添加了需要添加到 .eslint.cjs 的准确行。 - Kostanos

如果你的目标是 Node.js 14，请不要将 ecmaVersion 设置为 2022。因为在 Node.js 14 中只实现了 ES2022 的部分功能。 - jordanbtucker

Answer 2

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

npm install --save-dev babel-eslint

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

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

- golopot

---

谢谢！设置了 babel-eslint 后问题得到解决。 - Lucas Fabre

babel-eslint现在更名为@babel/eslint-parser。 - qntm

根据 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static，自 node 6 起支持 static。我正在使用 node 14，最新的稳定 LTS 版本。对于 ESLint 尚不支持它的原因，我并不十分清楚。 - Kostanos

根据TC39 Finished Proposals，Class Properties是一个已完成的提案，并包含在ES2022中。与此同时，ESLint 7.x官方支持最高到ES2020。这就是为什么你必须使用@babel/eslint-parser的原因。Babel ESLint Parser涵盖了所有实验性语法（在此处列出），而ESLint默认解析器不支持这些语法。 - Wayne Mao

Answer 3

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

.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模块。

- aercolino

Answer 4

您需要安装@babel/eslint-parser：

yarn add --dev @babel/eslint-parser

例如，您可以在.eslintrc.yml中使用解析器：

parser: "@babel/eslint-parser"

- Dorian