在 .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 also supports applying Babel configuration through your ESLint configuration.

所以我的问题是：

是否真的可以在 .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.

例如全局cli中eslint节点api使用的eslintrc，cli提供命令A.

进入目录B后，执行命令A。process.cwd()是B目录，但是@babel/xxxdeps在cli里node_modules.The 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 }],
    ],
  },
  ...
};

在 .eslintrc 中为 @babel/eslint-parser 声明 babel 插件

Declaring babel plugins for @babel/eslint-parser in .eslintrc

javascript

plugins

eslint

babeljs

所以我的问题是：