如何自動 Format HTML ?

栏目: Html · 发布时间: 6年前

内容简介:VS Code 其實已經內建VS Code 1.33.1

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

Version

VS Code 1.33.1

HTML Format

Enable

如何自動 Format HTML ?

Code -> Preferences -> Settings

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

Extra Liners

如何自動 Format HTML ?

js-beautify 預設會在 htmlheadbody 3 個 tag 前後加上 empty line,個人是不喜歡這種 style。

settings.json

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

extraLiners 設定為 null ,則 htmlheadbody 前後都不會有 empty line。

如何自動 Format HTML ?

Max Preserve New Lines

如何自動 Format HTML ?

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

如何自動 Format HTML ?

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

Manual Format

如何自動 Format HTML ?

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

Auto Format

如何自動 Format HTML ?

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

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

Conclusion

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

Reference

VS Code, HTML


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编写可读代码的艺术

编写可读代码的艺术

Boswell, D.、Foucher, T. / 尹哲、郑秀雯 / 机械工业出版社 / 2012-7-10 / 59.00元

细节决定成败,思路清晰、言简意赅的代码让程序员一目了然;而格式凌乱、拖沓冗长的代码让程序员一头雾水。除了可以正确运行以外,优秀的代码必须具备良好的可读性,编写的代码要使其他人能在最短的时间内理解才行。本书旨在强调代码对人的友好性和可读性。 本书关注编码的细节,总结了很多提高代码可读性的小技巧,看似都微不足道,但是对于整个软件系统的开发而言,它们与宏观的架构决策、设计思想、指导原则同样重要。编......一起来看看 《编写可读代码的艺术》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具