在 .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 中将@babel/plugin-proposal-class-properties 添加到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 声明插件的正确方法。不过，我怀疑这是可能的，因为这句话here：

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

所以我的问题是：

真的可以在.eslintrc 中声明 babel 插件吗？如果有，具体怎么做？

Answer 1

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

原来@babel/plugin-proposal-class-properties是babel插件，所以需要在babel配置的plugins属性中声明。根据the documentation of @babel/eslint-parser，可以通过babelOptions属性传入。

所以就这么简单：

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

Answer 2

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

就像this question。

例如eslint node api在全局cli中使用的eslintrc，cli提供命令A。

进入B目录后，执行命令A。process.cwd()是B目录，但是@babel/xxxdeps在cli node_modules中。babel/core在@987654332中找不到插件@。

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 }],
    ],
  },
  ...
};