如何在.eslintrc中为@babel/eslint-parser声明Babel插件？

你遇到的核心问题是混淆了ESLint插件和Babel插件的配置方式——直接把Babel插件放到ESLint的plugins数组里是错误的，因为ESLint的plugins字段是用来声明ESLint专属插件的，而不是Babel插件。下面是正确的配置方法：

正确的.eslintrc.js配置方式 #

@babel/eslint-parser支持通过parserOptions.babelOptions来传递Babel的配置（包括需要启用的插件），你需要修改你的配置文件，把@babel/plugin-proposal-class-properties放到这个字段下，而不是ESLint的plugins数组中。

修改后的完整配置示例：

module.exports = {
  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaVersion: 11,
    requireConfigFile: false,
    // 在这里添加Babel配置，包括目标插件
    babelOptions: {
      plugins: ["@babel/plugin-proposal-class-properties"]
    }
  },
  plugins: [
    "@babel" // 这是ESLint的@babel插件，用于补充适配Babel语法的ESLint规则，和Babel插件不是一回事
  ],
  // 其他ESLint规则配置...
};

为什么之前的配置会报错？ #

1. 第一种错误（classPrivateProperties语法不支持）：因为你没有通过正确的方式告诉@babel/eslint-parser要启用这个Babel插件，它无法解析类私有属性的实验性语法。
2. 第二种错误（找不到@babel/eslint-plugin-plugin-proposal-class-properties模块）：当你把Babel插件加到ESLint的plugins数组时，ESLint会按照规则尝试加载对应的ESLint插件包（格式为@babel/eslint-plugin-xxx），但这个包根本不存在，所以抛出了模块找不到的错误。

额外说明 #

如果你有单独的Babel配置文件（比如babel.config.js或者.babelrc），并且已经在其中配置了@babel/plugin-proposal-class-properties，那么你可以把requireConfigFile设置为true（或者直接删掉这个字段，默认值就是true），@babel/eslint-parser会自动读取你的Babel配置，不需要在ESLint配置里重复声明插件。

内容的提问来源于stack exchange，提问作者cyqsimon