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


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


1182
2018-01-12 17:49


起源


也可以看看 stackoverflow.com/questions/9495007/... - Kristopher Johnson
此外,如果您使用Vintage模式,您只需在正常模式下使用gg = G. - Wiktor Mociun
你可以浪费时间阅读整个页面,或者你可以得到 github.com/akalongman/sublimetext-codeformatter 然后回去工作。 - shaneparsons


答案:


您不需要任何插件来执行此操作。 只需选择所有行(按Ctrl 一个)然后从菜单中选择Edit→Line→Reindent。 如果您的文件使用包含HTML的扩展名保存,则此方法有效 .html 要么 .php

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

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

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


1930
2018-06-04 21:47



顺便说一下,这也适用于非HTML源代码,例如Ruby或JS - peter
如果代码没有在一行上打开的多个标签也不能在一行上关闭,反之亦然,那么这种方法很有用。 - Charlie Gorichanaz
完善!在mac上你需要super为cmd键,所以这样:{“keys”:[“super + shift + r”],“command”:“reindent”,“args”:{“single_line”:false}} - Geert Weening
line reindent绝对不能用于重新格式化任意HTML。例如当有多个没有换行符的html标签时。来自@anneke的HtmlTidy答案非常出色。据我所知,无论换行如何,它都会将源html完全正确地重新格式化为精确缩进的源代码。 - jpwynn
对于新手,单击“首选项”,然后选择“键绑定 - 用户”,并在方括号之间粘贴彼得的代码并保存文件。 - sigmapi13


在Sublime中有六种左右格式化HTML的方法。我测试了每个最流行的插件(参见 我在博客上写的那篇文章 有关完整的详细信息),但这里是一些最流行的选项的快速概述:

重新命令

优点:

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

缺点:

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

标签

优点:

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


351
2018-01-18 16:29



2登上Prettify。重新缩进不适用于我的html,找不到Tag和HtmlTidy在我调用时没有做任何事情。 - jcollum
刚试了一下,HTML-CSS-JS Prettify在我的用例中理想地工作(处理清理html远远好于内置的reindent或其他重新格式化程序包) - Mark Essel
尝试了所有其他的,但唯一有效的(用于HTML片段)是HTML-CSS-JS Prettify。谢谢! - zumek
还想提一下,你可以简单地使用ST的内置功能删除所有缩进(例如,一旦编辑了标记) - 选择块并按ctrl + j。 - zumek
这适用于非HTML扩展吗?我试过PHP和其他模板,它没有工作。 - Bsienn


我能找到的唯一包装是 标签

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

安装包控件后。转到包裹控制(优先  - > 包装控制)然后键入 install,打 输入。然后输入 tag 并击中 输入

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


172
2018-01-13 23:12



一个更好的插件是Tidy HTML - MatthewFord
谢谢......现在才知道包裹:D。在这里也看到了一些很棒的东西用于崇高文本。 arlando.net/blog/... - mars-o
老实说,这是唯一能够与一些HTML代码完美配合的代码,这些代码有数百个随机换行符,标签嵌套不正确。它基本上清理了我见过的最脏的HTML页面之一! - justinhartman
我不同意@ mars-o;这个插件很棒。 Tidy做了一些非常好的事情,并且非常成熟,但是这个插件做了很多其他有趣的事情。谢谢你的帖子。 - zedd45
这对xml不起作用 - Jonny Leeds


我推荐这个插件: HTML / CSS / JS Prettify, 真的行。

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

完成!


45
2018-01-07 03:22



您需要Node.js才能使用该插件。对普通用户来说不太舒服。 - nikoskip
与此插件的有用性相比,我们可以忽略安装Node.js的麻烦;) - Peter Zhu
安装说明 packagecontrol.io/packages/HTML-CSS-JS%20Prettify 工作得很好。谢谢。 - Sacky San


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

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

每次输入都会运行HTML Tidy。这可能有弊端,我对Sublime自己很新,但似乎做了我想要的:)


38
2017-11-01 15:17



我想这个插件可能会对大文件变得有点密集,如果它每次进入时都会运行,它可能变得迟钝? - Rikki
我使用ENTER键绑定大约一天然后删除它。它太慢并且在v2中将光标保持在屏幕顶部。 - Ravi Ram


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

您可以选择所有代码(CTRL + 一个)并使用应用内功能,reindent(Edit  - > Line  - > Reindent)或者你可以使用JsFormat格式化插件 Sublime Text 2 如果您希望有更多可自定义的设置,如何格式化代码以添加到Sublime Text的默认选项卡/缩进设置。

https://github.com/jdc0589/JsFormat

你可以轻松安装 JsFormat 使用包控制(Preferences  - > Package Control)然后打开包控件 键入install,命中 输入。然后输入 js format 并击中 输入, 你完成了。 (包控制器将显示安装状态,并在左下方栏中显示错误 Sublime

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

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

我在用着 CTRL + ALT + 2,您可以随意更改此快捷键。至今, JsFormat 是一个很好的插件,值得尝试!

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


20
2018-06-24 11:34





有一个名为SublimeHtmlTidy的插件非常好用

https://github.com/welovewordpress/SublimeHtmlTidy


11
2017-09-08 11:00





简单地去吧

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


9
2017-10-09 00:23



我没有看到菜单选项 Sublime Text 2 Version 2.0.1, Build 2217 在Mac上。你确定它是标准功能吗? - ostergaard
您必须从程序包管理器安装Tag。但我有一个问题。什么时候 <b>somthing</b> 后面跟一个逗号,逗号放在一个新行上,在浏览器视图中产生一些空格和逗号之间的空格。 - reitermarkus


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

  1. 需要的 Sublime Package Manager
  2. 按照安装包管理器的说明进行操作 这里
  3. 类型 cmd + shift + p 调出菜单
  4. 类型化 prettify
  5. 选择了 HTML prettify 菜单中的选择

繁荣。完成。看起来很棒


9
2017-07-27 16:01



这个解决方案完全符合我的要求,如果你已经安装了PM,则需要2秒钟。可能想补充一点,你需要安装美化包。 - doogle
注意:对于任何感兴趣的人,此答案中的插件需要安装node.js. - Fake Name


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

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

https://github.com/rareyman/HTMLBeautify


7
2018-01-21 18:46



我安装了它但是当我在演示文件上运行HTMLBeautify时它什么也没做。消息显示文件已被美化,但文件内容没有任何反应。 - Sam
我的猜测是你在使用Windows ......?在Windows上,您需要重新启动SublimeText 2才能使脚本可用。试试看,让我知道会发生什么。 :) - Ross
我做了,脚本可用,它只是没有更改文件中的任何内容。 - Sam
奇怪。我假设所有其他插件/包正常工作?我似乎无法在我的测试环境中复制这个问题 - 所以我不确定该告诉你什么。 :( - Ross
除了格式化一切正常,我希望它 - 也许是因为我正在运行德语版的Windows? - Sam