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 [email protected] source

Once [email protected] 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 [email protected] 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!