CODEWITHSUNDEEP
javascriptnode.jseslintclass-fields
Lucas Fabre
Lucas Fabre

Reputation: 1951

Eslint does not allow static class properties

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

Upvotes: 49

Views: 25788

Answers (4)

Majix
Majix

Reputation: 1792

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,
  }
}

Upvotes: 71

aercolino
aercolino

Reputation: 2356

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.

Upvotes: 8

Dorian
Dorian

Reputation: 9085

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"

Upvotes: 7

Chiawen
Chiawen

Reputation: 11789

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.

Upvotes: 44

Related Questions