Запретить неиспользуемые свойства объекта

#javascript #reactjs #material-ui #eslint #css-in-js

#javascript #reactjs #материал-пользовательский интерфейс #eslint #css-в-js

Вопрос:

Я использую Typescript и реагирую с помощью Material-UI. Я использую решение для стилизации Material-UI (CSS в JS) в виде крючка, как описано в их документах:

 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) Я был бы признателен за некоторое объяснение того, почему линтер не может предупредить меня о неиспользуемых свойствах classes объекта в первом примере. Заранее спасибо.

Ответ №1:

Для вашего варианта использования вам придется использовать пакет npm eslint-plugin-unicorn, в котором есть правило, по которому вы не хотите использовать неиспользуемые свойства

Ответ №2:

Вы можете создать пользовательское правило для вашего требования.

Вот документ: