How do I enable ESLint classPrivateMethods parser plugin?

Question

I'm trying to use the @babel/plugin-proposal-private-methods plugin with ESLint, however, any code using the new features causes this error:

ESLint: Parsing error: This experimental syntax requires enabling the parser plugin: 'classPrivateMethods'

Based on this error message it's not immediately obvious where this plugin should be enabled, and I could not find any instructions on how to add "parser plugins" to my .eslintrc (shown below).

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "jquery": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "plugins": [
        "react"
    ],
    "parserOptions": {
        "sourceType": "script",
        "ecmaVersion": 6,
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "camelcase": 0,
        "curly": 0,
        "wrap-iife": [
            2,
            "any"
        ],
        "linebreak-style": 2,
        "comma-style": [
            2,
            "last"
        ],
        "new-cap": 2,
        "strict": [
            2,
            "function"
        ],
        "no-undef": 2,
        "no-unused-vars": 0,
        "no-console": 0,
        "react/prop-types": 0
    }
}

How do I enable this parser plugin?

Answer 1

There was an issue for this in the babel-eslint repo: https://github.com/babel/babel-eslint/pull/523

It's recently been resolved and the fix is released in babel-eslint@11.0.0-beta.0 source

Once babel-eslint@11.0.0 is available, you can upgrade and plugins will be loaded from your Babel configuration file.

// babel.config.js
module.exports = {
  plugins: [
    "@babel/plugin-proposal-private-methods"
  ]
};

Answer 2

It is October now but babel-eslint@11.0.0 still not released yet. In the meantime, you can apply the solution below, which currently working for me

1. Install theses packages
   • @babel/plugin-proposal-class-properties
   • @babel/plugin-proposal-private-methods
   • @babel/eslint-parser
2. Enable classPrivateProperties and classPrivateMethods in your .eslintrc.json or your package.json (eslintConfig)
3. Change the parser in your .eslintrc.js

Result:

I am now able to use private methods in my code without eslint error

husky pre-commit hook also work

Feel free to comment if you get any problem implementing this solution.

Peace!

Answer 3

After years... Based on @Nidust answer, I realized that we need some more steps:

1. Install these packages: (+ @babel/core)
   npm i @babel/core @babel/eslint-parser @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods -D

2. Edit or create a .eslintrc.json file:

    { ... "parser": "@babel/eslint-parser", "parserOptions": { ... "babelOptions": { "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"] } } }

3. You'll also need a .babelrc (at least, empty) file:

    {}

be happy! :)

---

This is my full .eslintrc.json file with airbnb config:

{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module",
        "babelOptions": {
            "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
        }
    },
    "rules": {
        "import/extensions": ["error", "always", { "ignorePackages": true} ]
    }
}

VS Code:

Answer 4

What worked for me was to instal babel-eslint@11.0.0-beta-2 and change my eslint config.

Heres my eslint config in package.json:

  "eslintConfig": {
    "extends": "eslint:recommended",
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "plugins": [
      "classPrivateMethods",
      "babel"
    ],
    "env": {
      "node": true
    },
    "rules": {
      "no-console": 0,
      "no-unused-vars": 1,
      "babel/semi": 1
    }
  }

What's important is to set your "parser":"babel-eslint" and then set your "plugins":["classPrivateMethods","babel"]