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

时间:2012-01-12 17:49:30

标签: html sublimetext2 sublimetext indentation reformat

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

16 个答案:

答案 0 :(得分:2009)

您不需要任何插件来执行此操作。 只需选择所有行( Ctrl A ),然后从菜单中选择编辑→行→重新启动。 如果您的文件使用包含.html.php等HTML的扩展名保存,则此功能将有效。

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

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

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

答案 1 :(得分:362)

在Sublime中有六种左右格式化HTML的方法。我已经测试了每个最受欢迎的插件(有关详细信息,请参阅writeup I did on my blog),但这里是一些最受欢迎的选项的快速概述:

Reindent命令

优点:

  • 使用Sublime发货,因此无需安装插件

缺点:

  • 不删除额外的空行
  • 无法处理缩小的HTML,包含多个打开标记的行
  • 无法正确格式化<script>

Tag

优点:

  • 支持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是我书中的赢家。很多很棒的功能,没什么可抱怨的。

答案 2 :(得分:175)

我唯一能找到的包是Tag

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

安装包控件后。转到包控件(首选项 - &gt; 包控件),然后输入install,点击输入。然后输入tag并点击输入

安装标签后,高亮显示文字并按快捷键 Ctrl + Alt + F

答案 3 :(得分:47)

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

安装完成后,只需选择代码并按 Ctrl + Shift + H

完成!

答案 4 :(得分:39)

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

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

每次输入都会运行HTML Tidy。这可能有弊端,我对Sublime本人很陌生,但似乎做了我想要的事情:))

答案 5 :(得分:20)

问题是关于HTML,我还想提供有关如何自动格式化Sublime Text 2的Javascript代码的信息;

您可以选择所有代码( ctrl + A )并使用应用内功能,重新注册(Edit - &gt; {{1} } - > Line)或者您可以使用JsFormat格式化插件Reindent,如果您希望有更多可自定义的设置,如何格式化代码以添加到Sublime Text的默认选项卡/缩进设置。

https://github.com/jdc0589/JsFormat

您可以使用包控件(Sublime Text 2 - &gt; Preferences轻松安装 JsFormat 。打开包控件然后键入install,点击输入< / KBD> 的。然后输入Package Control并点击输入,您就完成了。 (包控制器将在js format左下方栏中显示安装成功和错误的状态

将以下行添加到您的键绑定中(Sublime - &gt; Preferences

Key Bindings User

我正在使用 ctrl + alt + 2 ,您可以随意更改此快捷键。到目前为止,{ "keys": ["ctrl+alt+2"], "command": "js_format"} 是一个很好的插件,值得尝试一下!

希望这会对某人有所帮助。

答案 6 :(得分:13)

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

https://github.com/welovewordpress/SublimeHtmlTidy

答案 7 :(得分:12)

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

  1. 需要Sublime Package Manager
  2. 按照安装包管理器here
  3. 的说明进行操作
  4. 键入 cmd + shift + p 以调出菜单
  5. 键入prettify
  6. 选择菜单中的HTML prettify选项
  7. 动臂。完成。看起来很棒

答案 8 :(得分:10)

只需转到

编辑 - &gt;标签 - &gt;文档上的自动格式标记

答案 9 :(得分:8)

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

检查出来,让我知道你的想法!

https://github.com/rareyman/HTMLBeautify

答案 10 :(得分:6)

我还没有权利发表评论,所以这只是与@ peter answer上述答案相关的其他信息。

如果标头中的IE conditional comments未完全符合要求,我发现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]--> 

答案 11 :(得分:6)

有一个很好的开源CodeFormatter plugin,它(沿着reindenting)可以美化脏代码,即使所有代码都是单行代码。

答案 12 :(得分:5)

我认为这就是你要找的东西:

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

答案 13 :(得分:3)

我正在使用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来安装整洁,在Windows上你必须自己下载它并在构建系统中指定工作目录,其中有整洁的位置:

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

或将其添加到PATH。

答案 14 :(得分:3)

你可以设置快捷键 F12 easy !!!

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

详见here

答案 15 :(得分:1)

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

  1. 安装包控制
  2. ⌘ + left shift + p(或 ctrl + alt + left shift + p)-> 包控制:安装包
  3. 输入 HTML-CSS-JS 美化
  4. 安装节点
  5. 重启 Sublime Text

享受。