스크립트
00:00:00ShadCN только что выпустил линтер, чтобы попытаться решить главную проблему Tailwind на сегодняшний день —
00:00:04дизайн-системы. С ростом популярности ИИ-агентов в Tailwind так и не появилось хорошего способа их соблюдать,
00:00:09поэтому вы могли заметить, что ИИ иногда добавляет свои стили там, где они вам совсем не нужны.
00:00:13Во многом именно поэтому люди переходят на альтернативы вроде StyleX,
00:00:17но теперь у ShadCN есть решение. Это линтер, заточенный под работу с ИИ-агентами
00:00:21и дизайн-системами Tailwind, так что давайте сразу посмотрим, что он умеет.
00:00:29Начнём с того, что делает этот линтер. В Tailwind имя класса — это просто строка,
00:00:34TypeScript больше ничего не контролирует, а значит, вы можете переопределить внутренние отступы
00:00:38у кнопки, которая сама управляет своими отступами. Вы также можете добавить случайный цвет вроде
00:00:43bg-pink-500 в компонент, использующий тему, или просто задать произвольный отступ
00:00:48в 13 пикселей, хотя в вашей дизайн-системе уже есть шкала отступов от 12 до 16.
00:00:53Сейчас ничего из этого не вызовет ошибок в вашей кодовой базе, и заметите это только вы
00:00:58при проведении код-ревью, либо если вы пропишете кучу правил в markdown-файле,
00:01:02чтобы другой агент проверял код за вас. Но Markdown плохо подходит для контроля. Он не настолько строг,
00:01:07как полноценный линтер. ShadCN провёл исследование на этот счёт. Он дал агенту 8 задач,
00:01:12провоцирующих отойти от правил, с промптами вроде "добавь кнопку удаления, по дизайну она розовая
00:01:16с закруглёнными краями", "сделай карточку статистики точно по макету, padding 13px, border-radius 10px"
00:01:22или "выдели карточку с тарифами, чтобы она бросалась в глаза". И тут видно, что абсолютно каждая
00:01:27модель допустила кучу нарушений дизайн-системы, но когда они подключили
00:01:31линтер, число ошибок упало до нуля. И раз мы знаем, что линтер действительно работает, как им пользоваться?
00:01:36Это плагин для Oxlint или ESLint, и он работает с любым проектом на Tailwind v4. Вам не обязательно
00:01:41использовать ShadCN UI. Мы можем начать с одного правила под названием «no restyle», но с разрешением «layout». И это
00:01:47означает, что на страницах можно позиционировать компонент с помощью margin, width, flex
00:01:51и hidden, но нельзя меняться их стили. То есть нельзя добавлять padding, цвет, типографику,
00:01:56форму, эффекты или анимации. Иначе выдаст такую ошибку: "P4 не допускается для button,
00:02:02кнопка сама управляет отступами, используйте size по умолчанию, margin или gap у родительского элемента".
00:02:07"Задавайте размер в самом компоненте, только если это прямо предусмотрено дизайн-системой".
00:02:11Самое крутое в этих сообщениях об ошибках — то, что список размеров
00:02:15не прописан в самом линтере. Он считывает мою конфигурацию CVA из самого компонента кнопки.
00:02:19Если я добавлю ещё один размер, линтер предложит его как вариант. То же самое касается почти
00:02:24любой возможности Tailwind, меняющей стили. Если попытаться добавить цвет, нам скажут,
00:02:29что можно использовать только цвета из компонента. Плюс этого в том, что вы получаете понятные
00:02:33сообщения об ошибках, и агент может их прочитать и понять, как всё исправить. Это даже сэкономит
00:02:37вам токены, потому что ему не придётся загружать весь ваш markdown-файл с дизайном,
00:02:41чтобы понять, что правильно. Линтер просто даст ему точечную подсказку.
00:02:45Это были базовые сценарии использования нашего первого правила `no-restyle`, но тут полно опций
00:02:50для кастомизации под вашу дизайн-систему, но к этому мы вернёмся через минуту. Сначала давайте
00:02:54взглянем на остальные пять правил, ведь всего их шесть. `no-raw-colors` — это правило,
00:02:58которое запрещает писать вещи вроде `bg-pink-500` или использовать несуществующий цвет или цвет
00:03:03с опечаткой. Это должен быть цвет из темы, и линтер снова поможет агенту,
00:03:08прямо сказав, что разрешено. Это работает даже с SVG: если прописать жестко заданный `fill`
00:03:13для `path`, вы получите ошибку "используйте `currentColor` с классом цвета текста". Далее идёт `no-`
00:03:18`arbitrary-values` — тут всё понятно из названия. Например, padding в 13 пикселей в квадратных
00:03:24скобках жестко задаёт значение вне токенов, используйте вместо этого `p-3.25` — это то же значение по шкале.
00:03:30Или `rounded-[10px]` в скобках предлагает заменить на `rounded-lg`,
00:03:35потому что линтер считывает токен радиуса и знает, какое значение равно 10 пикселям.
00:03:40Один из лучших примеров того, как это правило понимает вашу дизайн-систему: если вы попытаетесь
00:03:44задать случайный цвет фона, ошибка подскажет ближайший токен темы,
00:03:49что станет отличным контекстом для ИИ-агента. Остальные правила довольно очевидны.
00:03:54Есть правило для запрета инлайн-стилей, ещё одно против неизвестных классов,
00:03:57и ещё одно для обязательного использования статичных классов. Последнее интересно, потому что линтер
00:04:02не видит, каким будет класс, из-за динамики в шаблонном литерале,
00:04:06поэтому это правило побуждает вас изменить подход,
00:04:09чтобы линтер мог эффективно выполнять свою работу. Вот такие шесть правил,
00:04:13но, как уже упоминалось, здесь много настроек, чтобы адаптировать их
00:04:16под вашу дизайн-систему. Для этого используются контракты. Это правила для отдельных компонентов,
00:04:21сопоставляемые по регулярным выражениям имени. Например, я указал, что у заголовка карточки
00:04:25можно менять типографику, но не шрифт и его насыщенность, а у контента карточки можно менять отступы,
00:04:30но не типографику. Теперь `text-lg` для заголовка проходит без ошибок, а `p-6`
00:04:36для контента работает, но попытка изменить насыщенность шрифта заголовка всё так же выдаёт ошибку.
00:04:41Ещё одна отличная функция — кастомные сообщения. Каждое правило и его тип принимает
00:04:45сообщение с плейсхолдерами, которые подставляются из кода. В контракте для кнопки
00:04:50я задал сообщение: "для верстки задавайте ширину родителю, а не кнопке", а также
00:04:55"кнопка сама отвечает за отступы, используйте размер кнопки" с шаблоном для размеров. Они подставятся
00:04:59автоматически из моей дизайн-системы. Можно также задать глобальную заметку, которая будет прикрепляться
00:05:04в конце каждого замечания. Это полезно, чтобы дать агенту дополнительные подсказки или контекст,
00:05:08например, указать, где находится ваша документация или гайдлайны. Если у вас уже есть
00:05:12дизайн-система, старт работы с линтером потребует некоторых усилий,
00:05:16так как его нужно сконфигурировать, но он выглядит достаточно гибким для большинства
00:05:20систем, да и ИИ-агент явно поможет вам всё настроить. И последнее, о чём я хочу
00:05:25поговорить — это ограничения линтера. Он не видит чистый CSS, так что если у вас прописан цвет
00:05:30в глобальном CSS-файле или через `@apply`, он не сможет это проконтролировать. Он также не отслеживает связи
00:05:36от родителя к дочернему селектору, отслеживает классы только на один шаг в пределах файла, а новый
00:05:40токен темы по определению считается системным, поэтому агент, который добавит новый цвет в тему,
00:05:46чтобы обойти правило, всё равно пройдёт проверку. Это значит, вам всё ещё нужно проверять токены
00:05:50и варианты, которые добавляет агент. Линтер проверяет только правила, но не решает,
00:05:54вписывается ли новый оранжевый цвет в вашу систему. Проверка остаётся за вами, но линтер
00:05:59заметно облегчит эту работу. Ещё один момент, который стоит обдумать:
00:06:03достаточно ли строг API вашего компонента? Если кнопка
00:06:08просто принимает любое имя класса и не имеет вариантов, линтеру нечего будет предложить.
00:06:13Так что главное условие — наличие готовой дизайн-системы и вариантов компонентов,
00:06:18а если вы используете shadcn/ui, всё это у вас уже есть, так что большинству беспокоиться не о чем.
00:06:22Последний минус — пока это доступно только в Oxlint и ESLint, плагина для Biome
00:06:27ещё нет, но на GitHub уже висит открытый issue, так что, надеюсь, скоро он появится.
00:06:31Вот такой новый линтер от ShadCN: шесть правил, помогающих соблюдать дизайн-систему,
00:06:36что очень кстати в эпоху, когда большую часть кода пишет ИИ. Мне интересно, решает ли это ваши
00:06:41проблемы или вы всё ещё думаете переходить на что-то вроде StyleX?
00:06:45Пишите в комментариях ниже, подписывайтесь на канал и, как всегда, до встречи в следующем видео!
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기