在 .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)

但是，如果我将@babel/plugin-proposal-class-properties添加到.eslintrc.js中的plugins ，如下所示：

  "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 插件？ 如果是这样，究竟如何？

Answer 1

其实比我想的要简单...

于是发现，由于@babel/plugin-proposal-class-properties是一个babel插件，所以需要在babel的配置的plugins属性中声明。 根据@babel/eslint-parser的文档，这些可以通过babelOptions属性传入。

因此，它真的很简单：

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

Answer 2

在使用@babel/eslint-parser作为eslintrc parser时，我也遇到了这个问题。

就像这个问题。

比如全局cli中eslint节点eslintrc使用的eslintrc，cli提供了一个命令A

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

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