在 .eslintrc 文件中声明 @babel/eslint-parser 的 Babel 插件

Question

我一直在尝试让@babel/plugin-proposal-class-properties插件与@babel/eslint-parser和eslint良好地协同工作，但一直没有成功。

这是我的.eslintrc.js：

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

以下是相关的已安装软件包：

+-- @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

在这种配置下，ESLint 会报错并显示以下信息：

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

但是如果我像这样在.eslintrc.js的plugins中添加@babel/plugin-proposal-class-properties：

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

我收到了这个错误信息：

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'.

---

看起来这不是在.eslintrc.js正确声明@babel/eslint-parser插件的方法。但是，由于这里的引用，我认为这是可能的：

@babel/eslint-parser还支持通过您的ESLint配置应用Babel配置。

所以我的问题是：

实际上是否可以在.eslintrc中声明babel插件？如果可以，具体如何操作？

- cyqsimon

Answer 1

事实上，这比我想象的要简单...

因此，事实证明，由于@babel/plugin-proposal-class-properties是 babel 插件，它需要在 babel 的配置文件的plugins属性中声明。根据@babel/eslint-parser文档的说明，这些可以通过babelOptions属性传递。

因此，真正的方法就是这样:

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

- cyqsimon

Answer 2

当使用@babel/eslint-parser作为eslintrc的解析器时，我也遇到了这个问题。

例如，在全局cli中使用eslint node api所使用的eslintrc，并且该cli提供了一个命令A。

在进入目录B后，执行命令A。此时process.cwd()是B目录，但是@babel/xxx的依赖在cli的node_modules中。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

我通过在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 }],
    ],
  },
  ...
};

- Richie Choo