logo标签列表

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

htmlsublimetext2sublimetextindentationreformat
1391

我有一些格式不良好的HTML代码，我想重新格式化它。是否有一个命令可以在Sublime Text 2中自动重新格式化HTML代码，使其更易于阅读？

4
请参考 https://dev59.com/KGkx5IYBdhLWcg3wA_xS。 - Kristopher Johnson
1
如果您使用Vintage模式，您可以在正常模式下使用gg=G。 - Wiktor Mociun
4
你可以浪费时间阅读整个页面，或者你可以直接获取 https://github.com/akalongman/sublimetext-codeformatter 并回到工作中。 - shaneparsons
重新缩进根本不起作用，摆弄它只是浪费时间。请遵循shaneparson的建议。 - Wassim Katbey
16个回答
2147

你不需要任何插件来实现这个功能。 只需选择所有行（CTRL+A），然后从菜单中选择 编辑 → 行 → 重新缩进。 如果您的文件保存有包含HTML的扩展名，例如.html或.php，则此方法适用。

如果您经常使用此功能，则可能会发现以下按键映射很有用：

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

如果您的文件尚未保存（例如，您刚将片段粘贴到新窗口中），则可以在选择重新缩进选项之前，通过选择菜单视图→语法→所选语言手动设置缩进语言。

20
顺便提一下，这个方法也适用于非HTML源代码，例如Ruby或JS。 - peter
86
如果代码在一行上有多个标签未同时关闭或反之亦然，那么这种方法就不起作用了。 - Charlie Gorichanaz
32
非常好！在 Mac 上，您需要使用“超级键”来代替“命令键”，因此代码如下所示： { "keys": ["super+shift+r"], "command": "reindent" , "args": {"single_line": false}}。 该代码用于重新缩进代码块，参数 "single_line" 设置为 false 表示重新缩进多行代码。 - Geert Weening
183
重新缩进行绝对不能用于重新格式化任意HTML，例如当有多个没有换行的HTML标记时。@anneke提供的HtmlTidy答案更优秀。据我所知，无论有没有换行符，它都可以完全和正确地将源HTML重新格式化为漂亮缩进的源代码。 - jpw
34
对于新手来说，点击“首选项”，然后选择“按键绑定 - 用户”，将Peter的代码粘贴在方括号之间并保存文件。 - sigmapi13
显示剩余21条评论
400

有大约六种方式可以在Sublime中格式化HTML。 我已经测试了最受欢迎的每个插件（有关完整详情，请参见我在博客上撰写的文章），但以下是其中一些最受欢迎的选项的快速概述：

Reindent命令

优点：

  • 与Sublime捆绑在一起，无需安装插件

缺点：

  • 不会删除额外的空行
  • 无法处理压缩的HTML，包含多个开放标签的行
  • 无法正确格式化<script>块

Tag

优点：

  • 支持ST2 / ST3
  • 删除额外的空行
  • 没有二进制依赖性

缺点：

  • 对PHP标记不友好
  • 无法正确处理<script>块

HTMLTidy

优点：

  • 处理PHP标记
  • 一些设置可调整格式

缺点：

  • 需要PHP（退回到Web服务）
  • 仅适用于ST2
  • 已被放弃？

HTMLBeautify

优点：

  • 支持ST2 / ST3
  • 简单，没有二进制依赖性
  • 支持OS X，Win和Linux

缺点：

  • 在内联注释中有点不友好
  • 不会扩展最小化或压缩的代码

    • HTML-CSS-JS Prettify

    优点：

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

    缺点：

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

    哪一个是最好的？

    在我看来，HTML-CSS-JS Prettify是获胜者。拥有许多出色的功能，几乎没有什么可抱怨的。

    13
    同意使用 Prettify 进行格式美化。重新缩进在我拥有的 HTML 上没有起作用，找不到标签，当我调用 HtmlTidy 时它也没有做任何事情。 - jcollum
    2
    刚试了一下，HTML-CSS-JS Prettify 在我的使用情况下表现得非常理想（比内置的重新缩进或其他格式化程序包更好地清理了 HTML）。 - Mark Essel
    2
    尝试了其他所有的选项，但唯一成功（用于HTML片段）的是HTML-CSS-JS Prettify。谢谢！ - zumek
    1
    还想提一下，你可以使用ST内置的功能轻松地删除所有缩进（例如在编辑标记后）。只需选择该块并按Ctrl+J即可。 - zumek
    1
    这个适用于非HTML扩展名吗？我尝试了PHP和其他模板，但没有成功。 - Abdul Rehman
    显示剩余10条评论
    181

    我找到的唯一软件包是Tag。

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

    在安装软件包控制后，进入软件包控制 (首选项 -> 软件包控制)，然后键入install并按enter。然后键入tag并按enter。

    安装Tag后，选中文本并按快捷键Ctrl+Alt+F。

    21
    更好的插件是Tidy HTML。 - MatthewFord
    1
    谢谢...刚知道有关于包的内容 :D。在这里看到了一些很酷的Sublime Text的东西。http://arlando.net/blog/setting-up-sublime-text-2-for-front-end-development/ - mars-o
    3
    这真的是唯一一个可以很好地处理成百上千个随机换行符和错误嵌套标签的HTML代码的工具。它基本上清理了我见过的最混乱的HTML页面！ - justinhartman
    1
    我不同意 @mars-o 的观点；这个插件很棒。Tidy确实做了一些非常好的事情，并且非常成熟，但是这个插件还做了其他一些有趣的事情。感谢您的帖子。 - zedd45
    @JonnyLeeds，它有点像，但并不总是正确的。对于XML特别是，可以尝试使用Indent XML或IndentX等工具。 - Joel Mellon
    62

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

    安装后，只需选中代码，然后按下CTRL+SHIFT+H。

    完成！

    5
    普通用户使用该插件需要安装Node.js，但这并不太方便。 - nikoskip
    6
    与这个插件的实用性相比，我们可以忽略安装Node.js所带来的麻烦;) - Peter Zhu
    1
    安装 https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify 的指示非常好用。谢谢。 - Sacky San
    为添加PHP扩展支持：https://github.com/victorporof/Sublime-HTMLPrettify/issues/532 - Rick
    42

    只是一个一般的提示。我用来自动整理我的HTML的方法是安装HTML_Tidy软件包，然后将以下键绑定添加到默认设置中（我使用的）：

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

    这将在每次键入时使用HTML Tidy。这可能会有一些缺点，我对Sublime还很陌生，但它似乎可以做到我想要的 :)

    2
    我想象这个插件在处理大文件时可能会变得有些繁重，如果它每次按回车键时都运行，可能会变得缓慢。 - Rikki
    2
    我使用了 ENTER 绑定键约一天，然后将其删除。它太慢了，并且在 v2 中会将光标带到屏幕顶部。 - Ravi Ram
    30
    尽管问题是关于HTML的，但我还想额外提供有关如何自动格式化Sublime Text 2中的JavaScript代码的信息。
    您可以选择所有代码（CTRL+A），并使用应用内功能重新缩进(Edit -> Line -> Reindent)，或者使用JsFormat格式化插件来获得更多可自定义设置的选项，以及 Sublime Text 默认制表符/缩进设置之外的格式设置项。 https://github.com/jdc0589/JsFormat 您可以通过使用Package Control轻松安装JsFormat (Preferences -> Package Control)。打开Package Control，然后键入“install”，按Enter，然后键入“js format”并按Enter，完成操作。(包控制器将在Sublime的左下角显示安装状态，成功或错误)
    请将以下行添加到您的键绑定 (Preferences -> Key Bindings User)。
    { "keys": ["ctrl+alt+2"], "command": "js_format"}

    我正在使用CTRL+ALT+2，您可以将此快捷键更改为任何您想要的。到目前为止，JsFormat是一个很好的插件，值得一试！

    希望这能帮助到某个人。

    16

    对于我而言，HTML Prettify解决方案非常简单。我去了HTML Prettify页面。

    1. 需要Sublime Package Manager
    2. 按照这里的说明安装包管理器
    3. 键入CMD+SHIFT+P来打开菜单
    4. 输入prettify
    5. 在菜单中选择HTML prettify

    搞定。看起来很不错。

    这个解决方案完全按照我的期望工作，并且只需要不到2秒的时间，如果你已经安装了PM。可能需要添加需要安装prettify包的说明。 - doogle
    3
    注意：对于任何有兴趣的人，本答案中提到的插件需要安装node.js。 - Fake Name
    无法正常工作；仅缩进/换行HTML到一定程度的缩进，并将其余部分未缩进且在同一行上。 - Jonathan
    15
    11

    只需前往

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

    6
    在我的 Mac 上的 Sublime Text 2 Version 2.0.1，Build 2217 中，我没有看到那个菜单选项。您确定它是标准功能吗？ - ostergaard
    1
    您需要从包管理器中安装Tag。但我遇到了一个问题。当<b>something</b>后跟一个逗号时，逗号会被放在新的一行上，在浏览器视图中导致something和逗号之间有一个空格。 - reitermarkus
    9
    我创建了一个名为HTMLBeautify的包，可以很好地重新格式化HTML。我基于1997年发现的一个Perl脚本进行了更新，以支持所有新潮的现代标签。 :)
    请查看它，并让我知道你的想法！ https://github.com/rareyman/HTMLBeautify
    4
    我已经安装了它，但在运行HTMLBeautify演示文件时却没有任何反应。一个显示着文件已经被美化的消息弹出，但是文件内容并没有发生任何变化。 - Sam
    我的猜测是你在使用Windows系统...?在Windows上，您需要重新启动SublimeText 2以便使脚本可用。请尝试这样做并让我知道结果。 :) - Ross
    我已经尝试了，脚本是可用的，只是它没有改变文件中的任何内容。 - Sam
    奇怪。我假设所有其他插件/包都正常工作？在我的测试环境中，我似乎无法复制这个问题 - 所以我不确定该告诉你什么。 :( - Ross
    也许脚本无法访问包含缩进/取消缩进标签定义的设置文件？打开脚本源代码并查找：settings.get('…')（第19-29行）。然后，打开设置文件并查找包含标签的字符串。您可以复制“标记”字符串并直接将它们放入脚本中以查看是否有所帮助。（通常，脚本会查看设置文件以确定要缩进/取消缩进的内容 - 也许在您的情况下这不起作用...？）祝您好运！ - Ross
    显示剩余3条评论
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接