[英]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.我一直在尝试让
@babel/plugin-proposal-class-properties
插件与@babel/eslint-parser
和eslint
很好地配合使用,但没有成功。
This is my .eslintrc.js
:这是我的
.eslintrc.js
:
...
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 11,
"requireConfigFile": false,
},
"plugins": [
"@babel",
],
...
And these are the related installed packages:这些是相关的安装包:
+-- @babel/core@7.11.1
+-- @babel/eslint-parser@7.11.3
+-- @babel/eslint-plugin@7.11.3
+-- @babel/plugin-proposal-class-properties@7.10.4
+-- eslint@7.7.0
Under this configuration, ESLint errors with this message:在此配置下,ESLint 出错并显示以下消息:
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:但是,如果我将
@babel/plugin-proposal-class-properties
添加到.eslintrc.js
中的plugins
,如下所示:
"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
.这似乎不是在
.eslintrc.js
中为@babel/eslint-parser
声明插件的正确方法。 Still, I suspect it is possible due to this quote here :不过,我怀疑这是可能的,因为这里有这句话:
@babel/eslint-parser
also supports applying Babel configuration through your ESLint configuration.@babel/eslint-parser
还支持通过 ESLint 配置应用 Babel 配置。
Is it actually possible to declare babel plugins in .eslintrc
?是否真的可以在
.eslintrc
中声明 babel 插件? If so how exactly?如果是这样,究竟如何?
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.于是发现,由于
@babel/plugin-proposal-class-properties
是一个babel插件,所以需要在babel的配置的plugins
属性中声明。 According to the documentation of @babel/eslint-parser
, those can be passed in with babelOptions
property.根据
@babel/eslint-parser
的文档,这些可以通过babelOptions
属性传入。
Therefore it's really as simple as this:因此,它真的很简单:
...
"parserOptions": {
...
"babelOptions": {
"plugins": [
"@babel/plugin-proposal-class-properties",
...
],
},
},
"plugins": [
"@babel",
],
...
When using @babel/eslint-parser
as eslintrc parser
, I met this question too.在使用
@babel/eslint-parser
作为eslintrc parser
时,我也遇到了这个问题。
Just like this question .就像这个问题。
For example, the eslintrc
used by eslint node api in a global cli, and the cli provide a command A
.比如全局cli中eslint节点
eslintrc
使用的eslintrc,cli提供了一个命令A
After go to the directory B
, executing command A
.The process.cwd()
is B
directory, but the @babel/xxx
deps is in cli node_modules.The babel/core
can not find plugins in B
. go 到目录
B
后,执行命令A
process.cwd()
是B
目录,但是@babel/xxx
deps 在cli node_modules 中。babel babel/core
在B
找不到插件。
Parsing error: Cannot find module '@babel/plugin-proposal-decorators'\nRequire stack:
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/config/files/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/worker/babel-core.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/worker/handle-message.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/client.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/index.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@eslint/eslintrc/lib/config-array-factory.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@eslint/eslintrc/lib/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/cli-engine/cli-engine.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/cli-engine/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/api.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/test-a-es-checker/dist/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/dist/index.js
I resolved it by provide cwd
for babelOption in eslintrc.我通过在 eslintrc 中为 babelOption 提供
cwd
来解决它。
module.exports = {
...
parser: '@babel/eslint-parser',
babelOptions: {
cwd: __dirname, // The working directory that all paths in the programmatic options will be resolved relative to.
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
],
},
...
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.