Как использовать eslint-config-stylelint
CSS:
.fontSize11{ font-size: calc(var(--font-scale, 1 ) * 11px); }
В нашем проекте мы используем указанный выше формат размера шрифта в CSS. Некоторые люди в нашей команде не следуют указанному выше формату. Чтобы сохранить согласованность, кто-то предложил мне использовать eslint-config-stylelint для создания пользовательского правила, чтобы его можно было перехватить во время разработки. У меня нет опыта работы с инструментами сборки и линтерами. Я буду признателен, если кто-то может помочь мне с этим. Спасибо
Мой ключевой вопрос: почему вы используете общую конфигурацию ESLint для проверки CSS? Вы должны использовать любой из этих: github.com/stylelint/stylelint-config-recommended github.com/stylelint/stylelint-config-standard
@jeddy3 jeddy3 Я хочу, чтобы люди использовали форму calc(var(--font-size, 1) * XXpx) только для значений размера шрифта в css
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать встроенное правило Stylelint объявление-свойство-значение-разрешенный-список, чтобы применить определенный шаблон для значения свойства, а не создавать собственное правило.
Используя регулярное выражение, вы можете убедиться, что значение свойства font-size соответствует шаблону calc(var(--font-size, 1) * XXpx):
{
"rules": {
"declaration-property-value-allowed-list": {
"font-size": ["/calc\\(var\\(--font-scale, 1\\) \\* \\d+px\\)/"]
}
}
}
(Может быть более чистый способ написать это регулярное выражение.)
Если вы только начинаете работать со Stylelint, вам нужно расширить официальную стандартную конфигурацию в своей конфигурации. Ваша полная конфигурация Stylelint должна выглядеть так:
{
"extends": ["stylelint-config-standard"],
"rules": {
"declaration-property-value-allowed-list": {
"font-size": ["/calc\\(var\\(--font-scale, 1\\) \\* \\d+px\\)/"]
}
}
}
Чтобы сохранить согласованность, кто-то предложил мне использовать eslint-config-stylelint для создания пользовательского правила.
Stylelint и ESLint — разные инструменты. Вы должны использовать:
- Stylelint для очистки вашего CSS
- ESLint для анализа вашего JavaScript
(eslint-config-stylelint — это внутренний пакет, используемый командой Stylelint для проверки кода JavaScript. Он не предназначен для публичного использования.)
как заставить регулярное выражение работать только для 11px и выше?
Вы хотите, чтобы люди использовали только классы
.fontSizeXXили чтобы они могли использоватьfont-size, но его значение должно быть в формеcalc(var(--font-size, 1) * XXpx)?