Как отформатировать HTML и XML: beautify и минификация

Разметка почти всегда попадает в руки человека уже испорченной: минифицированная после сборки, вставленная одной строкой из чужого проекта или просто написанная второпях без единого отступа. Разобраться в такой каше глазами почти невозможно, сначала нужно вернуть структуру. Разберём, что на самом деле значит «отформатировать HTML», чем тут отличается XML и когда вместо отступов, наоборот, нужна минификация.

Отформатировать код с отступами или сжать его в одну строку можно прямо в браузере в форматтере HTML и XML, без установки редактора и без отправки кода на сервер.

«Отформатировать HTML» — это не про теги b, i, strong

Здесь легко перепутать два разных смысла слова «форматирование». Форматирование текста — это теги <b>, <i>, <strong>, <em>, которые делают часть текста жирной или курсивом. Форматирование кода — про читаемость разметки: отступы по вложенности, перенос каждого тега на новую строку. Инструмент ниже занимается вторым. Содержимое тегов он не трогает, только расставляет отступы, чтобы структуру можно было читать глазами.

<!-- До форматирования -->
<div class="card">
	<h3>Заголовок</h3>
	<p>Текст карточки</p>
</div>

<!-- После форматирования -->
<div class="card">
	<h3>Заголовок</h3>
	<p>Текст карточки</p>
</div>

Чем HTML отличается от XML при форматировании

Тип документа инструмент определяет автоматически по содержимому, но обрабатывает их по-разному, потому что у форматов разная строгость.

HTML снисходителен. Браузер и без того привык достраивать незакрытые теги, поэтому форматтер справляется почти с любой разметкой, даже слегка неаккуратной.

XML требует строгого синтаксиса: каждый открытый тег обязан быть закрыт, а вложенность соблюдена без исключений. Если в документе это нарушено, форматтер не станет угадывать, что имелось в виду, и покажет ошибку разбора вместо результата. Это свойство формата, а не баг инструмента. Невалидный XML в принципе нельзя однозначно превратить в дерево, а значит, и красиво расставить отступы.

Beautify или минификация

Одна и та же операция форматирования обратима, инструмент умеет и разворачивать код в читаемый вид, и сжимать его обратно в одну строку.

• Beautify с отступами нужен, когда с кодом предстоит работать человеку: разобраться в чужой вёрстке, найти конкретный тег, показать структуру коллеге.
• Минификация нужна перед выкладкой в продакшн. Она убирает переносы строк и лишние пробелы, файл становится легче и быстрее грузится. Комментарии при этом можно сохранить или тоже вырезать, это отдельная настройка.

Между режимами переключается один тумблер, а не два разных инструмента.

Сколько пробелов на отступ

Для beautify-режима есть выбор между 2, 4 и 8 пробелами на уровень вложенности. Универсального правильного варианта нет, важно совпадение со стилем остального проекта. Если в репозитории .editorconfig или конфиг Prettier уже задают отступ, берите его же, а не свой любимый.

Форматирование — не то же самое, что проверка

Форматтер приводит код в порядок, но не проверяет его правильность. Если в HTML не хватает alt у картинки или нарушена семантика, разметка всё равно отформатируется без единого замечания, это просто не его задача. Найти такие проблемы, проверить валидность по W3C, доступность и семантику поможет отдельная проверка HTML. Два инструмента дополняют друг друга.

Данные не покидают браузер

Разбор, форматирование и минификация выполняются полностью на стороне клиента, вставленный код никуда не отправляется. Отсюда практическое ограничение. Скорость обработки зависит от вашего устройства, а не от сервера, поэтому очень большие документы (от 10 МБ) могут обрабатываться заметно дольше обычного.

Итог

«Отформатировать HTML» на практике означает одно из двух: либо разложить код по отступам для читаемости, либо, наоборот, сжать его в одну строку перед продакшеном. XML требует более строгого синтаксиса и честно сообщает об ошибке, если структура нарушена, вместо того чтобы угадывать. Прогнать через оба режима удобнее всего в форматтере выше, результат появляется сразу по мере вставки кода.