Поддержание чистоты CSS в JS с помощью Stylelint

Поддержание чистоты CSS в JS с помощью Stylelint

От автора: мне нравится CSS в JS. Я использую его все время на работе и в личных проектах. Мне нравится, как он создает крутые темы и динамические стили. Но одна вещь, которой мне не хватает из обычного CSS — это линтинг.

Stylelint для CSS — это фантастический проект, который позволяет легко применять соглашения и избегать ошибок в стилях. Однако до недавнего времени я никогда не использовал его с CSS в JS. В выпуске версии 9.5.0 была добавлена поддержка первого класса для написания CSS в JS. Теперь выполнять линтинг в стиле популярных библиотек, таких как styleled-components и emotion, стало проще, чем когда-либо.

Остальная часть этой статьи будет посвящена emotion, но процесс линтинга styled-components практически идентичен.

Линтинг CSS

Давайте начнем с создания нового приложения React. Для этого мы можем использовать create-react-app.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Далее мы добавим некоторые зависимости. Мы можем начать с добавления emotion.

Это устанавливает две зависимости emotion. С помощью emotion мы можем стилизовать компоненты двумя разными способами. Чтобы убедиться, что линтинг работает должным образом, нам нужно начать с создания и стилизации компонентов.

Стилизация компонентов с помощью свойства CSS

Используя свойство css, мы можем передать либо стили объекта, либо стили строки.

В этом примере кода мы создали компонент футера. Мы стилизовали тег футера с помощью стилей объектов, а тег абзаца — с помощью строковых стилей. Для получения дополнительной информации, ознакомьтесь с документацией emotion.

Использование стилизованных компонентов

Используя styled, мы можем передавать стили в HTML-теги.

В этом примере кода мы создали компонент заголовка и применили его к стилю prop.

Использование stylelint

Теперь, когда мы разработали некоторые компоненты, давайте займемся линтингом!

Затем создайте файл с именем .stylelintrc.

Затем мы добавляем скрипт npm в package.json.

После этого мы можем запустить скрипт, и получим следующий вывод

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Как видите, мы получаем несколько ошибок. Это связано с тем, что stylelint-config-standard оптимизирован для простого старого CSS. Давайте добавим несколько переопределений правил в файл .stylelintrc.

Теперь мы можем запустить yarn lint:css и получаем следующий вывод.

Упс! Похоже, мы написали плохой CSS. Хорошо, что Stylelint помог нам. Как вы видите, stylelint обнаружил, что наши ошибки были в компонентах, стилизованных как с помощью css, так и с помощью styled. Довольно круто!

Использование jest со stylelint

Jest — отличный способ запуска тестов, так почему бы не использовать его и для линтинга? Начните с установки некоторых зависимостей.

Далее создайте jest.stylelint.config.js.

Затем мы обновляем команду lint:css:

После этого мы снова запускаем lint:css.

В чем дело? Похоже, jest-runner-stylelint использует версию stylelint 8.3.1. Поддержка CSS в JS была добавлена в stylelint позже.

Давайте укажем jest-runner-stylelint использовать последнюю версию stylelint. Просто добавьте поле resolutions в package.json:

Затем снова запустите yarn, чтобы переустановить зависимости, и выполните yarn lint:css. На этот раз мы получаем тот же результат, что и раньше:

Теперь все, что нам осталось сделать, это исправить ошибки в этих модулях, и мы готовы к работе. Посмотрите репозиторий на GitHub.

Автор: Malcolm Laing

Источник: https://medium.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий