如何使用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并点击enter。

安装标签后，突出显示文本，按下快捷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）并使用应用程序内功能reindent（Edit-> Line-> Reindent），也可以使用JsFormat格式插件，Sublime Text 2以获取有关如何设置代码格式的更多自定义设置。 Sublime Text的默认选项卡/缩进设置。

https://github.com/jdc0589/JsFormat

您可以使用程序包控制（-> ）轻松安装JsFormat。打开程序包控制，然后输入install，hit。然后输入并点击，完成。（软件包控制器将在的左下角显示安装状态，并显示成功和错误）PreferencesPackage Controlenterjs formatenterSublime

将以下行添加到您的键绑定（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

我认为这是您要寻找的：

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

我还没有发表评论的权限，因此这仅仅是与@peter 答案上方的答案相关的其他信息。

我发现，如果标头中的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]--> 

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

我正在使用整洁的自定义构建系统来美化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。

您可以设置快捷键F12容易！！！

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

在这里查看详细信息。