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

Question

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

Answer 1

你不需要任何插件来做到这一点。 只需选择所有行（ CTRL + A ），然后从菜单中选择 Edit → Line → Reindent。 如果您的文件使用包含 HTML 的扩展名（如.html或.php ）保存，这将起作用。

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

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

如果您的文件未保存（例如，您刚刚将片段粘贴到新窗口中），您可以在选择重新缩进选项之前通过选择菜单查看 → 语法 → 选择的语言来手动设置缩进language of choice 。

Answer 2

在 Sublime 中格式化 HTML 的方法有六种左右。 我已经测试了每个最流行的插件（有关完整详细信息，请参阅 我在博客上所做的文章），但这里有一些最流行的选项的快速概述：

缩进命令

优点：

• 随附 Sublime，因此无需安装插件

缺点：

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

标签

优点：

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

缺点：

• PHP 标签上的阻塞
• 不能正确处理<script>块

HTML整洁

优点：

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

缺点：

• 需要 PHP（回退到 Web 服务）
• 仅 ST2
• 弃？

HTML美化

优点：

• 支持 ST2/ST3
• 简单且无二进制依赖
• 支持 OS X、Win 和 Linux

缺点：

• 内联注释有点窒息
• 是否扩展最小化/压缩代码

HTML-CSS-JS 美化

优点：

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

缺点：

• 需要 Node.js
• 不太适合嵌入式 PHP

哪个最好？

HTML-CSS-JS Prettify 是我书中的赢家。 很多很棒的功能，没什么可抱怨的。

Answer 3

我能找到的唯一包是Tag 。

您可以使用包控件安装它。 https://sublime.wbond.net

安装包控件后。 转到包控制（首选项->包控制），然后输入install ，按回车键。 然后输入tag并按回车键。

安装 Tag 后，突出显示文本并按快捷键Ctrl + Alt + F 。

Answer 4

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

安装后，只需选择代码并按CTRL + SHIFT + H 。

完毕！

Answer 5

只是一个一般提示。 我为自动整理 HTML 所做的是安装 HTML_Tidy 包，然后将以下键绑定添加到默认设置（我使用）：

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

这会在每次输入时运行 HTML Tidy。 这可能有缺点，我自己对 Sublime 还是很陌生，但它似乎可以做我想做的:)

Answer 6

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

您可以选择所有代码（ CTRL + A ）并使用应用程序内功能，reindent（ Edit -> Line -> Reindent ）或者如果您想在Sublime Text 2使用 JsFormat 格式插件如何格式化您的代码以添加到 Sublime Text 的默认选项卡/缩进设置。

https://github.com/jdc0589/JsFormat

您可以使用包控制（ Preferences -> Package Control ）轻松安装JsFormat打开包控制，然后键入 install，按ENTER 。 然后输入js format并点击ENTER ，你就完成了。 （包控制器将在Sublime的左下角显示安装成功和错误的状态）

将以下行添加到您的键绑定（ Preferences -> Key Bindings User ）

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

我正在使用CTRL + ALT + 2 ，您可以随意更改此快捷键。 到目前为止， JsFormat是一款不错的插件，值得一试！

希望这会帮助某人。

Answer 7

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

https://github.com/welovewordpress/SublimeHtmlTidy

Answer 8

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

1. 需要Sublime Package Manager
2. 按照此处安装包管理器的说明进行操作
3. 输入CMD + SHIFT + P 调出菜单
4. 打字prettify
5. 在菜单中选择HTML prettify选项

繁荣。 完毕。 看起来很棒

Answer 9

只需转到

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

Answer 10

我创建了一个名为HTMLBeautify的包，它可以很好地重新格式化 HTML。 我以 1997 年发现的 Perl 脚本为基础——我更新了它以使用所有新的现代标签。 :)

检查一下，让我知道你的想法！

https://github.com/rareyman/HTMLBeautify

Answer 11

我还没有有特权的评论，所以这是仅仅与@彼得的信息，回答上面的回答。

如果标题中的 IE条件注释不是完全内嵌的，例如向左对齐，我发现 HTML 没有按预期对齐：

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Answer 12

有一个很好的开源CodeFormatter 插件，它（连同重新缩进）可以美化脏代码，即使所有代码都在一行中。

Answer 13

我认为这就是你要找的：

https://github.com/victorporof/Sublime-HTMLPrettify

Answer 14

我正在使用tidy和自定义构建系统来美化 HTML。

我的 Packages/User/ 目录中有 HTMLTidy.sublime-build：

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

和 tidy_config.cfg 文件在同一目录中：

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

只需选择构建系统并按CTRL + B或CMD + B即可重新格式化文件内容。 一个小问题是 ST2 不会自动重新加载文件，因此要查看结果，您必须切换到其他文件并返回（或切换到其他应用程序并返回）。

在 Mac 上我使用 macports 来安装 tidy，在 Windows 上你必须自己下载它并在构建系统中指定工作目录，tidy 所在的位置：

"working_dir": "c:\\HTMLTidy\\"

或将其添加到 PATH。

Answer 15

您可以轻松设置快捷键F12 ！！！

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

在这里查看详细信息。

Answer 16

HTML-CSS-JS Prettify - 传递最好的。

1. 安装包控制
2. ⌘ + 左移 + p（或 ctrl + alt + 左移 + p）-> 包控制：安装包
3. 输入 HTML-CSS-JS 美化
4. 安装节点
5. 重启 Sublime Text

享受。