Почему важен парсер
Форматирование HTML — это не расстановка отступов. <span>a</span> <span>b</span>
отрисуется с пробелом между словами; если развести эти span по строкам с
отступом, пробел сохранится, но у <span>a</span><span>b</span> пробела нет, и
добавленный перенос строки его создаст. Форматтер, который этого не моделирует,
меняет страницу.
Здесь работает HTML-парсер Prettier: он отслеживает строчный и блочный контекст и чувствительность к пробелам для каждого элемента. По той же причине он отказывается форматировать разметку, которую не смог разобрать, вместо того чтобы выдать что-то правдоподобное.
Что не трогается
<pre>, <textarea>, <script> и <style> сохраняют содержимое без изменений.
В первых двух пробелы видны читателю, в последних двух они принадлежат вообще
другому языку.
Форматирование перед коммитом
Практическая польза — в diff'ах. Единообразно отформатированная разметка означает, что ревью показывает реальные изменения, а не стену переставленных отступов, и снимает целую категорию бессмысленных споров на код-ревью.
Вопросы
Может ли форматирование изменить отображение страницы?+
В HTML — да: пробелы между строчными элементами отрисовываются. Prettier знает, какие элементы строчные и где пробел значим, — поэтому здесь используется он, а не наивная расстановка отступов. Блочные элементы переносятся свободно, строчные — аккуратно.
Содержимое pre и textarea в безопасности?+
Да. Пробелы внутри них — это содержимое, и оба остаются побайтово. То же касается тел script и style.
Почему атрибуты разъехались по строкам?+
Prettier переносит их, когда тег выходит за ширину строки. Это осознанное и стабильное правило: одинаковый ввод всегда даёт одинаковый вывод, а именно это делает diff отформатированного HTML читаемым.
Чинит ли он сломанную разметку?+
Нет, и не должен. Незакрытые теги и перепутанная вложенность сообщаются как ошибка разбора, а не угадываются. Форматтер, молча чинящий разметку, прячет тот самый баг, который надо было увидеть.