禁止使用对象属性

Question

我使用Typescript和React与Material-UI。我正在使用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对象中未使用的属性。提前谢谢。

Answer 1

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

Answer 2

您可以为您的需求创建自定义规则。

文件如下:

• https://eslint.org/docs/developer-guide/working-with-rules
• https://astexplorer.net/
• https://dev.to/alexgomesdev/writing-custom-typescript-eslint-rules-how-i-learned-to-love-the-ast-15pn