如何使用 Sublime Text 2 重新格式化 HTML 代码?

我有一些格式很差的 HTML 代码,我想重新格式化。是否有一个命令可以自动在 Sublime Text 2 中重新格式化 HTML 代码,使其看起来更好并且更易于阅读?

答案

您不需要任何插件即可执行此操作。只需选择所有行( Ctrl A ),然后从菜单中选择 “编辑”→“行”→“重新缩进”。如果您使用扩展名包含 HTML 的扩展名(如.html.php来保存文件,则此方法有效。

如果您经常这样做,则可能会发现此键映射很有用:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

如果未保存文件(例如,您只是将其粘贴到新窗口中),则可以在选择重新缩进选项之前,通过选择菜单视图→语法→选择的语言来手动设置缩进的language of choice

Sublime 中有大约六种格式化 HTML 的方法。我已经测试了每个最受欢迎的插件(有关完整的详细信息,请参见我在博客上所做的文章 ),但是以下是一些最受欢迎的选项的简要概述:

重新缩进命令

优点:

  • Sublime 附带,因此无需安装插件

缺点:

  • 不删除多余的空行
  • 无法处理缩小的 HTML,带有多个打开标签的行
  • 格式不正确的<script>

标签

优点:

  • 支持 ST2 / ST3
  • 删除多余的空行
  • 没有二进制依赖性

缺点:

  • PHP 标签阻塞
  • 无法正确处理<script>

HTMLTidy

优点:

  • 处理 PHP 标签
  • 调整格式的一些设置

缺点:

  • 需要 PHP(回退到 Web 服务)
  • 仅 ST2
  • 弃?

HTML 美化

优点:

  • 支持 ST2 / ST3
  • 简单且无 binaray 依赖
  • 支持 OS X,Win 和 Linux

缺点:

  • 内嵌评论有些令人窒息
  • 扩展最小化 / 压缩的代码

HTML-CSS-JS 美化

优点:

  • 支持 ST2 / ST3
  • 处理 HTML,CSS,JS
  • 与 Sublime 的菜单完美集成
  • 高度可定制
  • 每个项目的设置
  • 保存时格式化选项

缺点:

  • 需要 Node.js
  • 不适用于嵌入式 PHP

哪个最好?

HTML-CSS-JS Prettify 是我书中的获奖者。很多很棒的功能,没什么好抱怨的。

我唯一能找到的包是Tag

您可以使用程序包控件进行安装。 https://sublime.wbond.net

安装程序包控件后。转到程序包控制( “首选项” ->“ 程序包控制” ),然后键入install ,然后按Enter 。然后输入tag并按回车

安装 Tag 之后,突出显示文本,然后按快捷键Ctrl + Alt + F。

我推荐这个插件: HTML / CSS / JS Prettify ,它确实有效。

安装后,只需选择代码,然后按Ctrl + Shift + H 即可

做完了!

只是一般提示。我自动整理 HTML 的工作是安装软件包 HTML_Tidy,然后将以下按键绑定添加到默认设置(我使用的默认设置)中:

{ "keys": ["enter"], "command": "html_tidy" },

每次输入都会运行 HTML Tidy。这可能有弊端,我对 Sublime 还是很陌生,但它似乎可以满足我的要求:)

尽管问题是针对 HTML 的,但我还想提供有关如何为 Sublime Text 2 自动格式化 Javascript 代码的信息

您可以选择所有的代码( 按 Ctrl + A),并使用在应用程序的功能,重新缩进( Edit - > Line - > Reindent ),或者您可以使用 JsFormat 格式插件Sublime Text 2 ,如果你想有更多的自定义设置如何格式化代码以添加到 Sublime Text 的默认选项卡 / 缩进设置中。

https://github.com/jdc0589/JsFormat

您可以使用 Package Control( Preferences -> Package Control )轻松安装JsFormat ,打开Package Control然后键入 install,然后按Enter 。然后输入js format并按Enter ,就完成了。 (包控制器将在Sublime左下方显示安装状态以及成功和错误)

将以下行添加到您的键绑定中( Preferences > Key Bindings User

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

我正在使用ctrl + alt + 2 ,您可以根据需要更改此快捷键。到目前为止, JsFormat是一个不错的插件,值得尝试!

希望这会帮助某人。

有一个名为 SublimeHtmlTidy 的插件,效果很好

https://github.com/welovewordpress/SublimeHtmlTidy

对我来说, HTML Prettify解决方案非常简单。我去了HTML Prettify 页面

  1. 需要Sublime Package Manager
  2. 按照此处的说明安装软件包管理器
  3. 输入cmd + shift + p 调出菜单
  4. 打字prettify
  5. 在菜单中选择HTML prettify选择

繁荣。做完了看起来很棒

只需转到

编辑 -> 标签 -> 自动格式化文档上的标签

我创建了一个名为HTMLBeautify的程序包,该程序可以很好地重新格式化 HTML。我以 1997 年发现的 Perl 脚本为基础,对它进行了更新,使其可以与所有新的有现代标签的标签一起使用。 :)

检查一下,让我知道您的想法!

https://github.com/rareyman/HTMLBeautify