1370

我有一些格式不正确的 HTML 代码，我想重新格式化。是否有一个命令可以自动重新格式化 Sublime Text 2 中的 HTML 代码，使其看起来更好并且更易于阅读？

4

16 回答 16

2131

您不需要任何插件来执行此操作。只需选择所有行 ( CTRL+ A)，然后从菜单中选择 Edit → Line → Reindent。如果您的文件使用包含 HTML 之类的扩展名.html或.php.

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

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

如果您的文件没有保存（例如，您只是将片段粘贴到新窗口），您可以通过选择菜单视图→语法→手动设置缩进语言，language of choice然后再选择重新缩进选项。

于 2012-06-04T21:47:04.373 回答
392

在 Sublime 中有六种左右格式化 HTML 的方法。我已经测试了每个最受欢迎的插件（有关详细信息，请参阅我在博客上所做的文章），但这里是一些最受欢迎的选项的快速概述：

重新缩进命令

优点：

  • 随附 Sublime，因此无需安装插件

缺点：

  • 不删除多余的空行
  • 无法处理缩小的 HTML、带有多个打开标签的行
  • 没有正确格式化<script>块

标签

优点：

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

缺点：

  • PHP标签上的扼流圈
  • 不能<script>正确处理块

HTML整洁

优点：

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

缺点：

  • 需要 PHP（回退到 Web 服务）
  • 仅限 ST2
  • 弃？

HTML美化

优点：

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

缺点：

  • 内联评论有点窒息
  • 是否扩展最小化/压缩代码

HTML-CSS-JS 美化

优点：

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

缺点：

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

哪个最好？

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

于 2014-01-18T16:29:50.477 回答
181

我能找到的唯一包是Tag。

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

安装包控制后。转到包控制（Preferences -> Package Control）然后键入install，点击enter。然后键入tag并点击enter。

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

于 2012-01-13T23:12:36.873 回答
55

我推荐这个插件：HTML/CSS/JS Prettify，它真的很管用。

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

完毕！

于 2015-01-07T03:22:07.933 回答
42

只是一般提示。我为自动整理我的 HTML 所做的是安装包 HTML_Tidy，然后将以下键绑定添加到默认设置（我使用的）：

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

每次输入都会运行 HTML Tidy。这可能有缺点，我自己对 Sublime 还很陌生，但它似乎可以满足我的要求 :)

于 2012-11-01T15:17:52.360 回答
27

尽管问题是针对 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，点击。然后输入并点击，你就完成了。（包控制器会在左下角显示安装成功和错误的状态）PreferencesPackage Control ENTERjs formatENTERSublime

将以下行添加到您的键绑定 ( Preferences-> Key Bindings User)

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

我正在使用CTRL++ ，您可以随意更改此快捷键ALT。2到目前为止，JsFormat是一个不错的插件，值得一试！

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

于 2013-06-24T11:34:08.927 回答
15

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

https://github.com/welovewordpress/SublimeHtmlTidy

于 2012-09-08T11:00:20.763 回答
15

对我来说，HTML Prettify解决方案非常简单。我去了HTML Prettify 页面。

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

繁荣。完毕。看起来很棒

于 2014-07-27T16:01:06.393 回答
11

只需前往

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

于 2012-10-09T00:23:20.437 回答
9

我创建了一个名为HTMLBeautify的包，它在重新格式化 HTML 方面做得不错。我基于我在 1997 年找到的一个 Perl 脚本——我更新了它以使用所有新奇的现代标签。:)

看看它，让我知道你的想法！

https://github.com/rareyman/HTMLBeautify

于 2013-01-21T18:46:39.050 回答
8

我想这就是你要找的：

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

于 2012-01-14T12:59:30.777 回答
7

我还没有发表评论的特权，所以这只是与@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]-->
于 2012-11-21T10:10:06.350 回答
7

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

于 2014-04-23T07:34:39.763 回答
6

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

或将其添加到 PATH。

于 2012-02-18T22:46:52.433 回答
3

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

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

在这里查看详细信息。

于 2014-11-21T15:55:25.730 回答
1

HTML-CSS-JS Prettify - 最好的。

  1. 安装包控制
  2. ⌘ + 左移 + p（或 ctrl + alt + 左移 + p）-> 包控制：安装包
  3. 输入 HTML-CSS-JS 美化
  4. 安装节点
  5. 重新启动崇高文本

享受。

于 2021-02-03T20:07:17.340 回答