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