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

Question

我有一些格式不佳的HTML代码,我想重新格式化.是否有一个命令会自动重新格式化Sublime Text 2中的HTML代码,使其看起来更好,更容易阅读？

Answer 1

你不需要任何插件来做到这一点.只需选择所有行(Ctrl A),然后从菜单中选择编辑→行→重新启动.如果您的文件使用包含.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>正确处理块

HTMLTidy

优点:

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

缺点:

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

HTMLBeautify

优点:

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

缺点:

• 使用内联注释略微扼杀
• 是否扩展最小化/压缩代码

HTML-CSS-JS Prettify

优点:

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

缺点:

• 需要Node.js
• 对嵌入式PHP不太好

哪个最好？

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

Answer 3

我能找到的唯一包是Tag.

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

安装包控件后.转到包控件(首选项 - > 包控件)然后键入install,点击enter.然后输入tag并点击enter.

安装标签后,突出显示文本并按快捷键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),或者您可以使用JsFormat格式化插件,Sublime Text 2如果您希望有更多可自定义的设置来设置如何格式化代码以添加到Sublime Text的默认选项卡/缩进设置.

https://github.com/jdc0589/JsFormat

您可以使用Package Control(- > )打开包控件轻松安装JsFormat,然后键入install,hit.然后输入并点击,你就完成了.(包控制器将显示安装状态,并在左下方栏中显示错误)PreferencesPackage Controlenterjs formatenterSublime

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

我使用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\\"

或将其添加到路径中。

Answer 12

我还没有有特权发表评论,所以这是关系到@彼得的简单信息,回答上面的回答.

我发现如果标题中的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 13

有一个很好的开源CodeFormatter插件,它(沿着reindenting)可以美化脏代码甚至所有的代码都是单行的.

Answer 14

我想这就是你要找的东西:

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