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

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

15 Solutions collect form web for “如何使用Sublime Text 2重新格式化HTML代码?”

你不需要任何插件来做到这一点。 只需select所有行( Ctrl A ),然后从菜单中selectEdit→Line→Reindent。 这将工作,如果您的文件保存为包含HTML如.html.php的扩展名。

如果你经常这样做,你可能会发现这个关键映射是有用的:

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

如果你的文件没有被保存(例如,你只是把一个片段粘贴到一个新的窗口中),你可以通过select菜单View→Syntax→ language of choice之前手动设置缩进的language of choice然后select重新加载选项。

在Sublime中有六种格式的HTML格式。 我已经testing了各种最受欢迎​​的插件(请参阅我在博客上的文章以获得完整的详细信息),但下面是一些最受欢迎的选项的简要概述:

缰绳命令

优点:

  • 船舶与崇高,所以没有插件安装需要

缺点:

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

标签

优点:

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

缺点:

  • 在PHP标签上扼杀
  • 不正确处理<script>

HTMLTidy

优点:

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

缺点:

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

HTMLBeautify

优点:

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

缺点:

  • 用内联注释扼stream一下
  • 扩展最小化/压缩的代码

HTML-CSS-JS美化

优点:

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

缺点:

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

哪个最好?

HTML-CSS-JS Prettify是我书中的赢家。 很多伟大的function,没有太多抱怨。

我唯一能find的软件包是Tag 。

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

安装包控制后。 去包控制( 首选项 – > 包控制 ),然后键入install ,按回车 。 然后inputtag回车

安装标签后,突出显示文本并按下快捷键Ctrl + Alt + F。

我推荐这个插件: HTML / CSS / JS美化 ,它真的有效。

安装后,只需select代码并按下Ctrl + Shift + H。

完成!

只是一个普遍的提示。 我做了什么来自动清理我的HTML,是安装包HTML_Tidy,然后将下面的键绑定到默认设置(我使用):

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

这与每个input运行HTML整洁。 这可能有弊端,我很崇拜自己,但它似乎做我想要的:)

尽pipe问题在于HTML,但我还想给出有关如何自动格式化Sublime Text 2的Javascript代码的信息 ;

您可以select所有的代码( ctrl + A ),并使用应用程序内的function,重新EditEdit – > Line – > Reindent ),或者如果您想要更多的自定义设置,可以使用JsFormat格式化插件来实现Sublime Text 2如何将代码格式化为Sublime Text的默认选项卡/缩进设置的附加内容。

https://github.com/jdc0589/JsFormat

您可以使用包控制( Preferences – > Package Control )轻松安装JsFormat打开包控件,然后键入安装,按回车 。 然后键入js format并按回车 ,就完成了。 (包控制器将显示Sublime左下angular的成功和错误的安装状态)

将以下行添加到您的密钥绑定( Preferences – > Key Bindings User

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

我正在使用Ctrl + Alt + 2 ,你可以改变这个快捷键,无论你想要的。 到目前为止, JsFormat是一个很好的插件,值得一试!

希望这会帮助别人。

有一个名为SublimeHtmlTidy的插件工作得很好

https://github.com/welovewordpress/SublimeHtmlTidy

只需去

编辑 – >标签 – >在文档上自动格式标签

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

  1. 需要Sublime Package Manager
  2. 按照说明在这里安装包pipe理器
  3. 键入cmd + shift + p调出菜单
  4. 键入prettify
  5. 在菜单中selectHTML prettify选项

繁荣。 完成。 看起来很棒

我创build了一个名为HTMLBeautify的包,可以很好地重新格式化HTML。 我基于1997年发现的Perl脚本,我更新了它与所有新的现代标签一起工作。 🙂

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

https://github.com/rareyman/HTMLBeautify

我还没有评论的特权,所以这只是额外的信息@佩特的答案上面的答案。

我发现HTML没有按照预期alignment,如果标题中的IE 条件注释不是完全内联的,例如向左移动:

 <!--[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插件 ,它可以美化脏代码,甚至所有的代码都是单行的。

我想这是你要找的东西:

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

你可以设置快捷键F12容易!

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

在这里看到细节。

我使用自定义生成系统来整理 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 

只需select生成系统,然后按ctrl + bcmd + b重新格式化文件内容。 一个小问题是,ST2不会自动重新加载文件,以查看结果,你必须切换到其他文件并返回(或其他应用程序,并返回)。

在Mac上,我已经使用macports来安装整洁,在Windows上,您必须自己下载它,并在构build系统中指定工作目录,其中tidy位于:

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

或者将其添加到PATH。

  • 崇高的文本编辑器:如何select所选区域的所有实例?
  • 如何删除崇高文本中的包2
  • 如何防止Sublime Text 2吞噬右括号,引号和括号?
  • 正则expression式用大写字母replace大写字母
  • 崇高3 - 设置function转到定义的关键映射
  • 如何在整个文件中进行列select?
  • 崇高的文字2 - 查找和replace全球(所有文件和所有目录)
  • 在Sublime Text 2中如何查看回车和换行符?
  • 如何将文本粘贴到每行的结尾? 崇高2
  • 什么是PEP8的E128:延续线缩进视觉缩进?
  • 崇高的文本2控制台输入