Menu
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-parseralso supports applying Babel configuration through your ESLint configuration.
Is it actually possible to declare babel plugins in .eslintrc? If so how exactly?
278
Note: You only need to use @babel/eslint-parser if you are using Babel to transform your code. If this is not the case, please use the relevant parser for your chosen flavor of ECMAScript (note that the default parser supports all non-experimental syntax as well as JSX).
babel-eslint is a parser that allows ESLint to run on source code that is transformed by Babel. Note: You only need to use babel-eslint if you are using Babel to transform your code.
By default, ESLint uses Espree as its parser. You can optionally specify that a different parser should be used in your configuration file so long as the parser meets the following requirements: It must be a Node module loadable from the config file where the parser is used.
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",
],
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With