Бьютифайер SCSS: форматируйте и украшайте код SCSS онлайн
Бьютифайер SCSS форматирует SCSS в вашем браузере с помощью парсера postcss от Prettier, превращая трудночитаемый исходник в аккуратно упорядоченный код. Вставьте или перетащите SCSS, затем настройте отступ и ширину строки перед копированием результата. Используйте его, чтобы подготовить таблицы стилей к ревью, уменьшить различия только в пробелах в diff или проверить, чисто ли разбирается ввод. Он бесплатен, не требует регистрации и работает офлайн после загрузки страницы.
Бьютифайер SCSS — это браузерный форматтер SCSS, использующий Prettier с парсером postcss. Он превращает вставленный или перетащенный SCSS в отформатированный вывод, который проще сканировать, ревьюить и которым проще делиться. Используйте бьютифайер SCSS, когда нужен быстрый способ прибрать исходник таблицы стилей без настройки локального рабочего процесса форматирования.
Инструмент предлагает настраиваемые отступ и ширину строки, чтобы вы могли выбрать, как отформатированный код будет с отступом и какой ширины должны быть строки перед переносом. Вставьте или перетащите SCSS, выберите доступные опции форматирования и скопируйте результат. Инструмент также поможет проверить, чисто ли разбирается ввод, и определить строку, где разбор не удаётся.
SCSS — это исходный код таблиц стилей, а бьютифайер меняет его представление для читаемости, а не преобразует в другой формат данных. Последовательное форматирование облегчает проверку вложенных правил и объявлений и может уменьшить изменения только в пробелах в diff кода. Это полезно при ревью сгенерированных стилей, следовании устоявшимся ожиданиям стиля или подготовке фрагмента для отчёта или ревью кода.
Бьютифайер SCSS работает полностью в вашем браузере: ваш ввод обрабатывается на вашем устройстве и не загружается, не сохраняется и не отправляется на сервер. Регистрация отсутствует, а после загрузки страницы он продолжает работать офлайн без соединения с сервером. Разработчики и DevOps-инженеры могут использовать его для рутинной чистки таблиц стилей, ревью перед коммитом и быстрых проверок SCSS, полученного от коллеги или сгенерированного инструментом.
Шаг 1: Вставьте или перетащите ваш SCSS в инструмент. Можно отформатировать полную таблицу стилей или меньший фрагмент кода.
Шаг 2: Выберите опции отступа и ширины строки. Эти настройки управляют компоновкой отформатированного вывода.
Шаг 3: Отформатируйте SCSS с помощью парсера postcss от Prettier. Проверьте результат, чтобы убедиться, что он читаем и упорядочен как ожидалось.
Шаг 4: Скопируйте отформатированный вывод для вашей таблицы стилей, ревью кода, баг-репорта или другого рабочего процесса.
Пример использования: Сделайте нечитаемый, машинно-сгенерированный файл SCSS проще для ревью перед его коммитом.
Пример использования: Проверьте документ SCSS, который писали не вы, на соответствие ожиданиям форматирования, которым нужно следовать.
Пример использования: Создавайте последовательно отформатированный вывод, чтобы diff подсвечивал изменения кода вместо шума из пробелов.
Пример использования: Отформатируйте фрагмент перед вставкой в баг-репорт или ревью кода.
Пример использования: Проверьте, чисто ли разбирается ввод SCSS, и найдите строку, где разбор не удаётся.
Пример использования: Приведите в порядок код таблицы стилей от коллеги или из другого источника перед обсуждением его структуры.
Пример использования: Применяйте последовательное форматирование к фрагментам SCSS при подготовке их для документации или обмена.