JS声明多个私有类方法时ESLINT报no-dupe-class-members错误是什么原因？

问题原因 #

你的写法完全符合JavaScript语法规范，告警是旧版本ESLint的规则不支持类私有成员语法导致的：

• 你使用的ESLint版本为v6.7.2，ESLint原生支持#开头的类私有成员语法是从v7.0.0版本才正式上线的
• 旧版本的no-dupe-class-members规则无法识别私有方法的#前缀，会把所有私有方法的名称统一解析为空字符串，所以每新增一个私有方法就会触发一条「重复空名称」的错误告警

解决建议 #

你可以根据项目情况选择以下任意一种方案处理：

1. 升级ESLint到7.0.0及以上版本，同时配套升级相关ESLint依赖的兼容版本，即可从根源解决识别问题。如果是vue cli3项目受依赖版本限制无法升级ESLint大版本，优先选择第二种方案。
2. 暂时无法升级ESLint大版本时，可以在你的.eslintrc配置文件中关闭原生的no-dupe-class-members规则，改用babel插件提供的兼容规则：

// .eslintrc.js 相关配置修改
module.exports = {
  // ...其他原有配置
  rules: {
    'no-dupe-class-members': 'off',
    // 已安装@babel/eslint-plugin的前提下，启用下面的规则代替原生规则，支持私有成员校验
    '@babel/no-dupe-class-members': 'error'
  }
}

3. 不建议直接忽略告警，原生规则失效后，如果项目中真的出现同名的公开类成员也不会触发告警，会留下潜在问题。

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