ESLint 报错：不允许 constructor 没有 super，怎么办？

前言

ESLint 是一个非常流行的 JavaScript 代码检查工具，可以帮助我们在编写代码的过程中发现并避免一些常见的错误和不规范的写法。但是，在使用 ESLint 的过程中，有时我们会遇到一些报错，如 constructor 没有 super 的错误。本文将详细介绍这个报错的原因和解决方法，帮助大家更好地使用 ESLint。

报错原因

在 ES6 中，如果一个类有父类，那么它的 constructor 中必须调用 super 方法，用以初始化父类的属性和方法。如果没有调用 super 方法，就会报出 "Class constructor 子类名 出现在 super() 之前" 的错误。

解决方法

方法一：手动调用 super 方法

最简单的解决方法是在子类的 constructor 中手动调用 super 方法，以确保父类的初始化工作得以完成。例如：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

在上面的例子中，子类 Dog 的 constructor 中手动调用了 super(name)，确保了父类 Animal 中的 name 属性能够正确地初始化。

方法二：禁止检查规则

如果你不想调用 super 方法，可以禁止检查这个规则。在 .eslintrc 配置文件中添加 "constructor-super": "off"，即可禁止这个规则的检查。例如：

{
  "rules": {
    "constructor-super": "off"
  }
}

方法三：使用 extend-semi 配置

如果你使用的是 React Native 或其他特殊平台，可以尝试使用 eslint-config-extend-semi 这个 eslint 配置。这个配置可以处理某些特殊平台不支持的语法，也解决了 constructor-super 报错的问题。例如：

// javascriptcn.com 代码示例
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "extend-semi"
  ],
  "rules": {
    // ...
  }
}

总结

本文介绍了 ESLint 报错中 constructor 没有 super 的错误，以及三种解决方法：手动调用 super 方法、禁用检查规则和使用 extend-semi 配置。希望本文能够帮助大家更好地理解 ESLint 报错和解决问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652df1357d4982a6ebf08008