禁止未使用的对象属性

如何解决禁止未使用的对象属性

我正在使用 Typescript 和 React with Material-UI。我正在以类似 Hook 的方式使用 Material-UI 的样式解决方案（JS 中的 CSS），这在他们的文档中是如何解释的：

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg,#FE6B8B 30%,#FF8E53 90%)',border: 0,borderRadius: 3,BoxShadow: '0 3px 5px 2px rgba(255,105,135,.3)',color: 'white',height: 48,padding: '0 30px',},});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

而且我希望 Eslint 检测对象 classes 的属性是否没有在任何地方使用。因为在拥有超过 6 个属性（CSS 规则）之后，很难检测到哪些属性正在被使用或者它们是否曾经被使用过。我尝试了 eslint-plugin-unicorn 和他们的 no-unused-properties 规则，尽管它可以检测到对象中未使用的属性，如果该对象被声明并且它的属性之一被点表示法访问：

const styles = {
    success: { … },danger: { … } // <- Property `danger` is defined but never used
};

console.log(styles.success)

但是在第一个代码示例中，我将一个对象作为参数传递给另一个函数和更多步骤，它无法检测 classes 的属性，它现在是具有样式属性的对象，正在使用与否。我想了解为什么会这样，原因是什么？（我对 Typescript 也很陌生）我希望能解释一下为什么 linter 不能警告我 classes 对象中未使用的属性在第一个示例中。提前致谢。

解决方法

对于您的用例，您必须使用 npm 包 eslint-plugin-unicorn，其中包含您想要的规则 no-unused-properties

您可以根据自己的要求创建自定义规则。

这是文档：