Search code examples
javascriptpluginsbabeljseslint

Declaring babel plugins for @babel/eslint-parser in .eslintrc

I've been trying for a while now to get @babel/plugin-proposal-class-properties plugin to work nicely with @babel/eslint-parser and eslint without success.

This is my .eslintrc.js:

...
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 11,
    "requireConfigFile": false,
  },
  "plugins": [
    "@babel",
  ],
...

And these are the related installed packages:

+-- @babel/[email protected]
+-- @babel/[email protected]
+-- @babel/[email protected]
+-- @babel/[email protected]
+-- [email protected]

Under this configuration, ESLint errors with this message:

Parsing error: \eg\example.js: Support for the experimental syntax 'classPrivateProperties' isn't currently enabled (xx:yy): (Fatal)

But if I add @babel/plugin-proposal-class-properties to plugins in .eslintrc.js like this:

  "plugins": [
    "@babel",
    "@babel/plugin-proposal-class-properties",
  ],

I get this error:

Error while running ESLint: Failed to load plugin '@babel/plugin-proposal-class-properties' declared in '.eslintrc.js': Cannot find module '@babel/eslint-plugin-plugin-proposal-class-properties'.

It seems like this isn't the correct way to declare plugins for @babel/eslint-parser in .eslintrc.js. Still, I suspect it is possible due to this quote here:

@babel/eslint-parser also supports applying Babel configuration through your ESLint configuration.

So my question is:

Is it actually possible to declare babel plugins in .eslintrc? If so how exactly?

Solution

  • It's actually simpler than I thought...

    So it turns out that since @babel/plugin-proposal-class-properties is a babel plugin, it needs to be declared in the plugins property of babel's configuration. According to the documentation of @babel/eslint-parser, those can be passed in with babelOptions property.

    Therefore it's really as simple as this:

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