如何自動 Format HTML ?

VS Code 其實已經內建 js-beautify 能自動 format HTML，但有些預設值比較特殊，需要稍作調整。

Version

VS Code 1.33.1

HTML Format

Enable

Code -> Preferences -> Settings

1. 輸入 html
2. 選擇右側 HTML
3. 確認 HTML > Format: Enable 打勾，這才會啟動 js-beautify

Extra Liners

js-beautify 預設會在 html 、 head 與 body 3 個 tag 前後加上 empty line，個人是不喜歡這種 style。

settings.json

"html.format.extraLiners": "null",

將 extraLiners 設定為 null ，則 html 、 head 與 body 前後都不會有 empty line。

Max Preserve New Lines

js-beautify 預設會保留 empty line 不會加以處理，有些人會故意在 HTML 保留 empty line 做分段用，個人是不喜歡這種 style，希望 js-beautify 幫我刪除掉 empty line。

填入 0 之後， js-beautify 就會幫你刪除掉 empty line。

Manual Format

在 command palette 輸入 format ，選擇 Format Document ，或直接輸入 ⇧⌥F 執行 js-beautify 。

Auto Format

也可以在手動按下 ⌘ + S 存檔時，自動執行 js-beautify 。

不過 Format on Save 並不支援 Auto Save after Delay ，也就是你可以不存檔讓 Live Server 即時反應結果，但此時並沒有啟動 js-beautify ，必須手動按下 ⌘ + S 才會啟動 js-beautify

Conclusion

• Extra Liners 與 Max Preserve New Lines 的設定較爭議，可視自己的喜好決定是否使用
• 實務上建議開啟 Format On Save ，讓你按下 ⌘ + S 時除了手動存檔，還可以順便執行 js-beautify
• Auto Save after Delay 僅對 Live Server 有用，但不會執行 js-beautify

Reference

VS Code, HTML