#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:
Вы можете создать пользовательское правило для вашего требования.
Вот документ: