How do I enable ESLint classPrivateMethods parser plugin?

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) enter image description here
  3. Change the parser in your .eslintrc.js enter image description here

Result:

I am now able to use private methods in my code without eslint error enter image description here

husky pre-commit hook also work enter image description here

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

Peace!


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

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: VS Code with ESLint and private fields


What worked for me was to instal [email protected] 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"]

Tags:

Javascript

Babeljs

Eslint

Recent Posts