Stylelint. Как установить и пользоваться
Вставка
- Опубліковано 23 сер 2024
- Привет! В последнее время меня часто спрашивают, что такое stylelint, и как с ним работать. Так вот - это специальная программа, проверяющая ваш код прямо в момент написания. Она работает по определенным правилам, описанным в специальном файле. Таким образом можно всегда писать код единообразно вплоть до написания css-свойств в одном порядке.
В этом видео я расскажу, как его установить и настроить. Поехали!
github.com/max... - исходники видео на GitHub
stylelint.io/ - сайт stylelint
github.com/sty... - плагин для VS Code
www.npmjs.com/... - stylelint
www.npmjs.com/... - stylelint-declaration-block-no-ignored-properties
www.npmjs.com/... - stylelint-order
www.npmjs.com/... - stylelint-scss
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#обучение #css #stylelint
Добрый день. Спасибо огромное за видео!!! Спасибо за Ваш труд.
Здравствуйте, пожалуйста)
Спасибо за понятное разъяснение и за Ваши труды.
рад стараться, спасибо)
Годнота!
Спасибо)
Приветствую! Спасибо за видео!
Привет, спасибо)
Спасибо, крутое видео. Респект тебе!!!
Пожалуйста)
Coool! Thankies!
А что делать если ошибки показываются только в файле style.css а не в файле style.scss, не могу понять в чем проблема(((
Спасибо за видео! Подскажи плз, т.е. не обязательно его включать в сборку? Достаточно установить пакеты npm и расширение vs?
Пожалуйста) все верно, сборка необязательна.
Максим, спасибо за видео и за уроки!
Скажи пожалуйста, насколько данный конфиг актуален на начало 2022 года? Стоит ли вносить какие-то изменения?
По сути своей актуален, обновились только версии. Можете зайти в гитхаб, найти мою галп сборку, там новая версия, новый файл конфига
Привет! у вас файл .stylelintrc был в вашей сборке. А где мне взять этот файл? Или я чего-то не поняла....
разобралась)
С гита моего
stylelint-declaration-block-no-ignored-properties больше не нужен? В вашем новом конфиге, где gulp - его уже нет.
Судя по всему да
Макс, подскажи пожалуйста, как всё таки убрать марки для important ? либо отключить их вообще, либо может там пишутся коментарии какие-то, которые отменяют исправление линтера ? пробовал в файле указать false и null ... не сработало (
хм.... в файле .stylelintrc изменил значение "keyframe-declaration-no-important": null, и "declaration-no-important": [ null, {"severity": "warning"}],, перезапустил vscode и сработало. теперь на impornant не ругается.
спасибо за информацию а у вас нет файланастроек к eslint? спасибо
Нет, не пользуюсь
@@maxgraph К сожалению его переписали, поэтому выдает массу ошибок
Максим, скажите пожалуйста, а stylelint можно использовать без сборки gulp? На простом проекте где есть только html css? Или же он работает только в сборке? И можно попросить вас перезалить видео на дзен? Спасибо заранее)
Без сборки можно, но все равно нужно будет ставить пакеты, которые нужны для работы)
Перезаливы на дзен будут, постепенно делаю
@@maxgraph и еще вопрос: плагины для styleint нужно устанавливать каждый раз на каждый проект, или будет достаточно установить их на компьютер куда-нибудь, а в проектах использовать только файл .styleintrc? Спасибо заранее))
не работает stylelint. по этому видео все делал несколько месяцев назад и вроде работал. а на новом марафоне заметил что не показывает ошибки. сбора твоя. в vscode плагин стоит. в json тоже видно что плагины стоят. Макс куда копать?(
разобрался. видимо в обновлениях stylelint что то поменяли. помогла установка старой версии
@@FryFry-rd5sf плагина в VS Code или NPM пакета? Как поставить старую версию?
@@alexsanders7240 у меня заработало с версией 0.86.0 плагина для vs code. В меню плагинов (слева на панели) находите Stylelint, жмете на шестерёнку - Установить другую версию.
Смысл от плагина, если он только контролирует и проверяет уже готовый код. Было бы куда удобнее, логичнее и практичнее чтоб он сам менял этот порядок
Но за видос ty
ну кому как))
В vs code можно настроить смену порядка при сохранении файла
@@jene3680 и как это сделать?
Привет, а как сделать так, чтобы в твоей сборке stylelint не ругался на отступы слева, когда их больше двух пробелов? Я хочу ставить отступы слева табами в scss
Это надо в его файл настроек лезть
@@maxgraph если вдруг интересно, я решил для себя эту проблему так: надо было в файле .stylelint изменить indentation на null, теперь он не будет ругаться на разное количество пробелов.
Этот плагин только с SCSS работает? Я пишу стили на SASS, все красным горит - ругается) Есть какая возможность под SASS настроить?
да можно, я думаю) не пробовал
скажите, настроили его под sass? если да, подскажите решение
@@StasKol Искал решения, но так и не нашёл чего на тот момент. Перешёл на scss
@@nikitaspasatelev7049 понял, тоже приходит эта мысль. Но жалко с sass-ом расставаться
А можно просто нажать F9 и отсортировать по алфавиту) Намного проще и логичнее.
Как говорит концепция Бритвы Оккама - не нужно плодить бессмысленные усложнения.
Если хотите - никто не запрещает
Но здесь есть смысл и логика)
сделал все так же, как вы - ничег оне работает. Просто ничего не подчеркивает, как бы я ни писал свой scss
Он обновился, возможно поэтому. Посмотрите в текущей моей галп сборке
@@maxgraph да, там что то обновилось, но я как то его смог все же добить)) часа 2 потратил
ЛЛЛЯЯЯЯЯ я короче делаю у меня ошибка типа не может найти , я часа два мучал гугл, по итогу там мне сказали что нужно сделать файл не css а scss и я смотрю у тебя scss, и я такой ДААА БЛЯЯЯЯЯЯ. все работает теперь.
😀
Как только не пробовал, не работает и всё!
Стайллинт с момента видео обновлялся. Читайте доку
@@maxgraph разобрался в итоге( settings.json всему виной) , что-то психанул просто. Извините
Заработало только с откатом на старую версию - 0.86.0
Здесь ниже год назад чел уже писал об этом писал в комментах, а с новой версией плагина - увы, не работает(
Но думаю, что можно обойтись и без стайл-линта, откройте файл конфига и приучайте себя писать свойства в определенном порядке.