Eslint does not allow static class properties

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.


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

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.