Из Pug в HTML, когда шаблон нужно увидеть глазами перед вставкой

Визуальная конвертация лучше, чем держать отступы в голове

Большинство утилит Pug в HTML дают текстовое поле и ссылку на скачивание. На пятистрочный фрагмент хватает. Ломается это, когда проверяете разметку навигации, сетку карточек или подвал со смешанным текстом и ссылками. Здесь источник и результат видны одновременно. Меняете отступ — панель HTML обновляется, переключаетесь на Предпросмотр, когда важны интервалы и иерархия — а не только то, есть ли где-то `</div>`. Полоса статуса под редактором показывает, разбирается ли шаблон. Если нет — видите сообщение компилятора на проблемной строке, а не тихую пустую панель. Связка живого HTML и отрисовки в песочнице — практическая разница. Вы не экспортируете разметку вслепую, чтобы в другом приложении проверить, как выглядит страница.

Две границы стоит назвать сразу, чтобы не терять время. Инструмент компилирует Pug, который вы вставляете или импортируете, в браузере. Папку проекта он не читает — `include`, `extends` и внешние partial’ы вне зоны действия. Миксины, условия, циклы и блоки `style.` / `script.` в том же файле ведут себя как при обычной локальной компиляции. Если в начале шаблона пишете многострочный JavaScript — например массив пунктов меню — используйте отдельную строку `-` и вложенный под ней блок JS. Pug считает кодом только первую строку после `-`; продолжить массив на следующем уровне отступа без этого шаблона — частая синтаксическая ловушка, и сообщение об ошибке кажется загадочным, пока не знаете правило.