Eslint does not allow static class properties

Question

I'm current developing an API on Node 12.14.1 and using Eslint to help me write the code. Unfortunately it does not allow me to set static class properties as shown below:

class AuthManager {
  static PROP = 'value'
}

The following error is given: Parsing error: Unexpected token =eslint

Static class properties are already supported on JS and on Node.
How can this rule be disable?

I also have the following .eslintrc.json file:

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

score 63 · Accepted Answer · edited Aug 08 '22 at 11:45

63

ESLint v8 now supports static class properties natively: https://eslint.org/blog/2021/10/eslint-v8.0.0-released

parserOptions ecmaVersion should be set to 13, 2022, or "latest" to enable the support.

Add this to your .eslint.(cjs | json | js)

{
  parserOptions: {
    ecmaVersion: 2022,
  }
}

edited Aug 08 '22 at 11:45

Kostanos

9,615
4
51
65

answered Oct 14 '21 at 18:43

Majix

1,702
1
16
8

3

As of v8 being released, this is now the 'right' answer. – Andrew Murphy Oct 26 '21 at 19:42
For some reason I'm still getting the same error on 8.6.0. Not sure if I'm the only one but if anyone reads this, know that you are not... – KyleFarris Jan 10 '22 at 19:08
FWIW, I ended up having to use `@babel/eslint-parser` as specified in other answers. Was trying to avoid using babel anywhere. But, at least it still works. – KyleFarris Jan 10 '22 at 19:32
4

Here is the configuration you need to add in your eslintrc config file (for a JSON file): { "parserOptions": { "ecmaVersion": "latest" } } – adrienv1520 Jan 17 '22 at 20:18
I tried this as I'm using `@typescript-eslint/parser` but does not work. using `eslint@8.11.0` – Pengő Dzsó Mar 16 '22 at 17:14
I'm confirming that it works in with `node 12`, `eslint 8.15`. I just added exactly the lines that need to be added to .eslint.cjs – Kostanos Aug 08 '22 at 11:47
1

If you are targeting Node.js 14, do not set `ecmaVersion` to `2022`. Only some of ES2022's features have been implemented in Node.js 14. – jordanbtucker Aug 20 '22 at 23:52

score 44 · Answer 2 · answered Feb 29 '20 at 11:05

44

ESLint with its default parser does not support class fields syntax for now. You can solve the problem by changing the configured parser to babel-eslint.

npm install --save-dev babel-eslint

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

Eslint's default parser, Espree, does not support class fields because that syntax is currently stage 3, and that it is decided that only stage 4 proposals are to be supported in Espree.

answered Feb 29 '20 at 11:05

golopot

10,726
6
37
51

1

Thanks! After setting `babel-eslint` the problem was solved. – Lucas Fabre Mar 02 '20 at 12:43
19

`babel-eslint` is now `@babel/eslint-parser`. – qntm Oct 30 '20 at 18:17
1

According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static static is supported since node 6. I'm using node 14, the latest stable LTS version. It is not pretty clear for me what is the reason for ESLint to not support it yet. – Kostanos Aug 26 '21 at 12:30
@Kostanos according to [TC39 Finished Proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md), Class Properties is a finished proposal and is included in ES2022. At the meantime, ESLint 7.x offically supports up to [ES2020](https://github.com/eslint/eslint/tree/v7.32.0#what-ecmascript-versions-does-eslint-support). This is why you have to use `@babel/eslint-parser`. Babel ESLint Parser covers all experimental syntax ([lists here](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)) that ESLint default parser doesn't support. – Wayne Mao Sep 08 '21 at 05:29

aercolino · Answer 3 · 2021-02-05T14:11:20.703

As of now, I had to use these configs

.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"
  ]
}

For which I had to install:

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

Notice that the @babel modules above are the only @babel modules in my package.json.

score 7 · Answer 4 · answered Jan 31 '21 at 21:21

7

you need to install @babel/eslint-parser:

yarn add --dev @babel/eslint-parser

And have the parser in your .eslintrc.yml for instance:

parser: "@babel/eslint-parser"

answered Jan 31 '21 at 21:21

Dorian

7,749
4
38
57

Eslint does not allow static class properties

4 Answers4

Linked

Related