npm 包 eslint-plugin-class-property 使用教程

什么是 eslint-plugin-class-property

在 React 16.7.0 版本中，新增了 Hooks 特性，这一特性曾经被视为将 React 革命性地改变的一步。不过，Hooks 实际上不是完整的替代品，有些场景 Hooks 也并不适用。那么在这个时候「class component」就成为另一种选择。

在使用「class component」时，我们会发现某些情况下使用类的非静态属性会出现错误的提示信息，这些错误的提示可能来自于 ESLint，因为 ESLint 并不支持非静态属性。因此，就需要使用 eslint-plugin-class-property，它是一个让 ESLint 支持非静态属性的插件。

如何使用 eslint-plugin-class-property

安装

要使用 eslint-plugin-class-property，需要先安装它。可以通过以下命令在项目中安装：

npm i eslint-plugin-class-property --save-dev

配置

在项目中安装 eslint-plugin-class-property 后，需要在 .eslintrc 配置文件中添加如下配置：

{
  "plugins": ["class-property"],
  "rules": {
    "class-property/no-instance-class-property": 1
  }
}

这样，eslint-plugin-class-property 就成功添加到项目中了。

开始使用

eslint-plugin-class-property 插件主要用于处理类的实例属性。在使用时，需要根据实际业务需求来决定使用哪些规则。举个例子：

class People {
  name = 'Tom'
}

在上面这个例子中，类 People 中的 name 属性并不是静态属性，在使用默认配置 ESList 检查时就会报错，此时我们可以通过 eslint-plugin-class-property 插件来解决问题。

{
  "plugins": ["class-property"],
  "rules": {
    "class-property/no-instance-class-property": 1
  }
}

在配置文件中添加上述配置后，使用类的实例属性时就不会再出现错误提示了。

总结

eslint-plugin-class-property 可以让 ESLint 支持类的非静态属性，让项目中使用更丰富的类特性。在添加 eslint-plugin-class-property 插件时，需要在配置文件中添加相应的配置项，根据实际需求来选择规则。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68110