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



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

您不需要任何插件就可以做到这一点。只需选择所有行(CTRL+A),然后从菜单中选择"编辑"→线→Reident。如果文件的扩展名包含类似.html.php的HTML,则这将起作用。

如果你经常这样做,你可能会发现这个密钥映射很有用:

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

如果您的文件没有保存(例如,您刚刚将一个片段粘贴到一个新窗口),您可以通过选择菜单"查看"手动设置缩进的语言→语法→language of choice,然后选择重新凹痕选项。

Sublime中有六种左右的HTML格式。我已经测试了每一个最流行的插件(请参阅我在博客上写的文章以了解详细信息),但这里有一些最流行的选项的快速概述:

Reident命令

优点:

  • Sublime附带,因此无需安装插件

缺点:

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

标记

优点:

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

缺点:

  • PHP标签上的阻塞
  • 无法正确处理<script>

HTML潮流

优点:

  • 处理PHP标记
  • 一些用于调整格式的设置

缺点:

  • 需要PHP(返回到web服务)
  • 仅ST2
  • 被抛弃了

HTML美观

优点:

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

缺点:

  • 内联评论让人窒息
  • 不展开最小化或压缩的代码

HTML-CSS-JS Pretify

优点:

  • 支持ST2/ST3
  • 处理HTML、CSS、JS
  • 与Sublime的菜单完美融合
  • 高度可定制
  • 根据项目设置
  • 保存时设置格式选项

缺点:

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

哪一个最好

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

我能找到的唯一包是Tag。

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

安装程序包控制后。转到程序包控制(首选项->程序包控制),然后键入install,点击输入。然后键入tag并点击输入

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

我推荐这个插件:HTML/CSS/JS Pretify,它真的很管用。

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

完成!

只是一个一般提示。我所做的是自动整理我的HTML,安装程序包HTML_tidy,然后将以下密钥绑定添加到默认设置(我使用):

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

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

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

您可以选择所有代码(CTRL+A)并使用应用程序内功能,重新缩进(Edit->Line->Reindent),如果您希望在Sublime Text的默认制表符/缩进设置之外,还可以使用Sublime Text 2的JsFormat格式化插件。

https://github.com/jdc0589/JsFormat

您可以使用Package Control(Preferences->Package Control)轻松安装JsFormat打开Package Control,然后键入install,点击ENTER。然后键入js format并点击ENTER,就完成了。(程序包控制器将在Sublime的左下栏显示安装成功和错误的状态)

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

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

我正在使用CTRL+ALT+2,你可以随心所欲地更改这个快捷键。到目前为止,JsFormat是一个很好的插件,值得一试!

希望这能帮助到别人。

对我来说,HTML Prettify解决方案非常简单。我转到HTML Pretify页面。

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

轰。完成。看起来很棒的

有一个名为SublimeHtmlTidy的插件,它运行得很好

https://github.com/welovewordpress/SublimeHtmlTidy

只需转到

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

我想这就是你想要的:

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

我创建了一个名为HTMLBeautify的包,它可以很好地重新格式化HTML。我根据1997年发现的一个Perl脚本编写了它——我对它进行了更新,使其能够使用所有新颖的现代标记。:)

看看吧,让我知道你的想法!

https://github.com/rareyman/HTMLBeautify

我还没有发表评论的权限,所以这只是与@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.spremive-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+BCMD>+B即可重新格式化文件内容。一个小问题是ST2不会自动重新加载文件,因此要查看结果,您必须切换到其他文件并返回(或切换到其他应用程序并返回)。

在Mac上,我使用macports安装了整洁,在Windows上,你必须自己下载它,并在构建系统中指定工作目录,整洁位于:

"working_dir": "c:\HTMLTidy\"

或者将其添加到PATH中。

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

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

请参阅此处的详细信息。

HTML-CSS-JS Pretify-绝对是最好的。

  1. 安装程序包控制
  2. ⑪+左移+p(或ctrl+alt+左移+p)->程序包控制:安装程序包
  3. 输入HTML-CSS-JS Pretify
  4. 安装节点
  5. 重新启动Sublime文本

享受吧。

相关内容

  • 没有找到相关文章

最新更新