Линтер для стилей Stylelint

Рет қаралды 5,076

Күн бұрын

Разбираем библиотеку Stylelint для единого код-стайла CSS в веб-приложении. Базовые настройки, подготовка VS Code и npm скриптов.
Тайм-коды:
00:00 Анонс темы
01:04 Подготовка линтера и редактора
03:35 Анализ сообщений об ошибке
04:57 Выбор стиля имен css классов
06:05 Понижение строгости
06:57 Кастомное сообщение об ошибке
07:50 Автоматическое форматирование
10:03 Кастомный код-стайл
13:16 Настройка npm скриптов
14:32 Подведение итогов
Официальный сайт утилиты stylelint.io
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 26

@user-eq5rm5nh4h 3 ай бұрын

Одно из самых полезных это сортировка и отбивка свойств пустой строкой по группам

@NikOroferov 3 ай бұрын

Пушечка, спасибо :3 Это такая база, спасиьо, что помогаешь в этом разобраться!

@user-fv6uf8gt2r 3 ай бұрын

Михаил, добрый день, спасибо за вашу работу, наконец-то разобрался со stylelint, успехов вам)

@sabrenda 3 ай бұрын

Что за лев этот тигр🔥 как раз хотел изучить этот инструмент, спасибо!

@kirill_prog 3 ай бұрын

Спасибо, сегодня попробую внедрить. 🔥🔥

@MegaTyles 3 ай бұрын

Большое спасибо за видео! Очень вовремя!

@STELLS541 3 ай бұрын

Очень годно) интересная и полезная вещь, ибо многие забивают на стили.

@evgeniykolmak5459 3 ай бұрын

Искал этот ролик пару недель назад, в итоге пришлось разобраться самому

@blackwood8816 3 ай бұрын

хорошо, что ты не нашел ролик)))

@NeoCoding 3 ай бұрын

на заметку, вещь полезная

@zirniy.oparish 3 ай бұрын

Круто

@snatvb 3 ай бұрын

сколько же я боли пережил с этим линтером. Он постоянно отваливается, они часто ломают совместимость и если на проекте чуть более старый линтер, то все ломается, vscode не поможет уже, похоже разработан он на коленке :(

@erega74 3 ай бұрын

Я правильно понимаю, если проект на tailwind то stylelint не нужен?

@dmitri_yz 3 ай бұрын

подскажите, пожалуйста, расширение, которое выводит подсказки в командную строку при наборе команд

@mishanep 3 ай бұрын

Это не расширение. Это особый терминал - iTerm и набор плагинов к нему.

@user-wm3yj4eu9t 3 ай бұрын

еще есть omz для мака, он по нажатию tab тоже предлагает варианты команд/путей

@dmitri_yz 3 ай бұрын

@@mishanep сделайте плиз видео по настройке iTerm было бы полезно)

@iGotton 3 ай бұрын

@CallOfFear26 3 ай бұрын

подскажите, почему Stylelint всегда выдает Error: No files matching the pattern "'./src/*/.css'" were found. Я уже всё перепробовал)

@lionstar3189 3 ай бұрын

линтер для css. очень спорно. Думаю тут вреда больше, чем пользы.

@mishanep 3 ай бұрын

Почему?

@lionstar3189 3 ай бұрын

@ep потому что проблема в css самом вряд ли возникнет, css свойства сам IDE дописывает. Проблема уровнем выше, как пример обычно это использовать ли БЭМ или тейлвинд, стоит ли юзать и как юзать scss переменные и миксины. И всё это решается обговорив командой только. А тут я увидел, что этот линтер тянет на проект только ограничения, которые абсолютно ничего не приносят. Ну да, можно настроить, а зачем? Проще без него.

@BOCbMOU Ай бұрын

@@lionstar3189 затем, что это единая сортировка всех свойств, автоматическое разделение их на группы, правила именование классов и т.д. И ограничения в меру - это хорошо. Что плохого в ограничении того же нейминга? И да, БЭМ тоже линтом отслеживается. Понятное дело лишь частично, но тем не менее.

@lionstar3189 Ай бұрын

@@BOCbMOU Для меня лично, все что есть в вс коде по умолчание. Вполне хватает, для html и для css. Всё что выше описано, я уже научился писать, без линтеров всяких. Оступы соблюдаю, есть очередность, какие свойства первые. И БЭМ это философия а не именование чисто. Точнее именовать тоже нужно уметь)

@BOCbMOU Ай бұрын

@@lionstar3189 научиться писать без линтера - это какое-то достижение? Имхо, как раз игнорирование линтеров и форматеров - это непрофессионализм. Впрочем, я так понимаю ты никогда в команде не работал? Тогда тебе стоит узнать, что твой коллега вупсель будет писать код в одном стиле, пупсень в другом, а ты сам в третьем. А потом будете весело всё это обсуждать на код ревью. Или не будете и тогда у вас будет код аля вырвиглаз. И вот именно линтеры и позволяют держать проект во вполне едином стиле, как и чистоту кода вне зависимости от навыков каждого разработчика.

@kondakov90 3 ай бұрын

Честно, не могу воспринимать ничего кроме px. Видимо привычка, которая глубоко на подкорке. Как будто ты приезжаешь в другую страну и все время пересчитываешь цены в свою привычную валюту.