質問内容

pugファイルをコンパイルして作成したHTMLファイルにおいて、見やすさを改善するために内側の要素を改行させる方法はありませんか？
よろしくお願いいたします。

開発環境

node : v12.7.0
npm : 6.10.0
pug-cli : 1.0.0-alpha6

問題のコード

pug
1//- 1.実装したいコード
2.header__hamburger
3  - for (var i = 0; i < 3; i++)
4    span.header__hamburger-parts
5
6//- 2.問題解決のために試してみたコード（for分を削除してバーティカルバーを追加）
7.header__hamburger
8  | span.header__hamburger-parts
9  | span.header__hamburger-parts
10  | span.header__hamburger-parts

html
1<!-- 0.実装したいコード -->
2<div class="header__hamburger">
3  <span class="header__hamburger-parts"></span>
4  <span class="header__hamburger-parts"></span>
5  <span class="header__hamburger-parts"></span>
6</div>
7
8<!-- 1をコンパイルした結果（改行されず見づらい） -->
9<div class="header__hamburger"><span class="header__hamburger-parts"></span><span class="header__hamburger-parts"></span><span class="header__hamburger-parts"></span></div>
10
11<!-- 2をコンパイルした結果（改行されたがタグを変換できていない） -->
12<div class="header__hamburger">
13  span.header__hamburger-parts
14  span.header__hamburger-parts
15  span.header__hamburger-parts
16</div>