如何自動 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


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

查看所有标签

猜你喜欢:

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

REST实战

REST实战

Jim Webber、Savas Parastatidis、Ian Robinson / 李锟、俞黎敏、马钧、崔毅 / 东南大学出版社 / 2011-10 / 78.00元

为何典型的企业项目无法像你为web所开发的项目那样运行得如此平滑?对于建造分布式和企业级的应用来说,rest架构风格真的提供了一个可行的替代选择吗? 在这本富有洞察力的书中,三位soa专家对于rest进行了讲求实际的解释,并且通过将web的指导原理应用到普通的企业计算问题中,向你展示了如何开发简单的、优雅的分布式超媒体系统。你将会学习到很多技术,并且随着一家典型的公司从最初的小企业逐渐成长为......一起来看看 《REST实战》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试