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

How do I reformat HTML code using Sublime Text 2?

提问by Ravi Ram

I've got some poorly-formatted HTML code that I'd like to reformat. Is there a command that will automatically reformat HTML code in Sublime Text 2 so it looks better and is easier to read?

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

回答by peter

You don't need any plugins to do this. Just select all lines (Ctrl A) and then from the menu select Edit → Line → Reindent. This will work if your file is saved with an extension that contains HTML like .htmlor .php.

你不需要任何插件来做到这一点。只需选择所有行 ( Ctrl A)，然后从菜单中选择编辑 → 行 → 缩进。如果您的文件使用包含 HTML 的扩展名（如.html或.php.

If you do this often, you may find this key mapping useful:

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

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

If your file is not saved (e.g. you just pasted in a snippet to a new window), you can manually set the language for indentation by selecting the menu View → Syntax → language of choicebefore selecting the reindent option.

如果您的文件未保存（例如，您只是将片段粘贴到新窗口中），您可以language of choice在选择重新缩进选项之前通过选择菜单查看 → 语法 → 手动设置缩进语言。

回答by Josh Earl

There are half a dozen or so ways to format HTML in Sublime. I've tested each of the most popular plugins (see the writeup I did on my blogfor full details), but here's a quick overview of some of the most popular options:

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

Reindent command

缩进命令

Pros:

优点：

• Ships with Sublime, so no plugin install needed

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

Cons:

缺点：

• Doesn't delete extra blank lines
• Can't handle minified HTML, lines with multiple open tags
• Doesn't properly format <script>blocks

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

Tag

标签

Pros:

优点：

• Supports ST2/ST3
• Removes extra blank lines
• No binary dependencies

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

Cons:

缺点：

• Chokes on PHP tags
• Doesn't handle <script>blocks correctly

• PHP 标签上的阻塞
• 不能<script>正确处理块

HTMLTidy

HTML整洁

Pros:

优点：

• Handles PHP tags
• Some settings to tweak formatting

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

Cons:

缺点：

• Requires PHP (falls back to web service)
• ST2 only
• Abandoned?

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

HTMLBeautify

HTML美化

Pros:

优点：

• Supports ST2/ST3
• Simple and no binaray dependencies
• Support for OS X, Win and Linux

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

Cons:

缺点：

• Chokes a bit with inline comments
• Does expand minimized/compressed code

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

HTML-CSS-JS Prettify

HTML-CSS-JS 美化

Pros:

优点：

• Supports ST2/ST3
• Handles HTML, CSS, JS
• Great integration with Sublime's menus
• Highly customizable
• Per-project settings
• Format on save option

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

Cons:

缺点：

• Requires Node.js
• Not great for embedded PHP

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

Which is best?

哪个最好？

HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.

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

回答by dardub

The only package I've been able to find is Tag.

我能找到的唯一包是Tag。

You can install it using the package control. https://sublime.wbond.net

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

After installing package control. Go to package control (Preferences-> Package Control) then type install, hit enter. Then type tagand hit enter.

安装包控件后。转到包控制（首选项->包控制）然后输入install，点击enter。然后输入tag并点击enter。

After installing Tag, highlight the text and press the shortcut Ctrl+Alt+F.

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

回答by Peter Zhu

I recommend this plugin: HTML/CSS/JS Prettify, It really works.

我推荐这个插件：HTML/CSS/JS Prettify，它确实有效。

After the installation, just select the code and press Ctrl+Shift+H.

安装后，只需选择代码并按Ctrl+Shift+H。

Done!

完毕！

回答by Anneke

Just a general tip. What I did to auto-tidy up my HTML, was install the package HTML_Tidy, and then add the following keybinding to the default settings (which I use):

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

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

this runs HTML Tidy with every enter. There may be drawbacks to this, I'm quite new to Sublime myself, but it seems to do what I want :)

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

回答by Gokhan Tank

Altough the question is for HTML, I would also additionally like to give info about how to auto-format your Javascript code for Sublime Text 2;

尽管问题是针对 HTML 的，但我还想提供有关如何为 Sublime Text 2 自动设置 Javascript 代码格式的信息；

You can select all your code(ctrl+ A) and use the in-app functionality, reindent(Edit-> Line-> Reindent) or you can use JsFormat formatting plugin for Sublime Text 2if you would like to have more customizable settings on how to format your code to addition to the Sublime Text's default tab/indent settings.

您可以选择所有代码 ( ctrl+ A) 并使用应用程序内功能 reindent( Edit-> Line-> Reindent) 或者您可以使用 JsFormat 格式化插件，Sublime Text 2如果您想对如何格式化代码进行更多可自定义的设置以添加到Sublime Text 的默认制表符/缩进设置。

https://github.com/jdc0589/JsFormat

https://github.com/jdc0589/JsFormat

You can easily install JsFormatwith using Package Control (Preferences-> Package Control) Open package control then type install, hit enter. Then type js formatand hit enter, you're done. (The package controller will show the status of the installation with success and errors on the bottom left bar of Sublime)

您可以使用 Package Control ( -> ) Open package control 然后输入 install, hit轻松安装JsFormat。然后输入并点击，你就完成了。（包控制器将在左下栏显示安装成功和错误的状态）PreferencesPackage Controlenterjs formatenterSublime

Add the following line to your key bindings (Preferences-> Key Bindings User)

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

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

I'm using ctrl+ alt+ 2, you can change this shortcut key whatever you want to. So far, JsFormatis a good plugin, worth to try it!

我使用ctrl+ alt+ 2，你可以改变任何你想这个快捷键。到目前为止，JsFormat是一款不错的插件，值得一试！

Hope this will help someone.

希望这会帮助某人。

回答by Christian Hagelid

There's a plugin called SublimeHtmlTidy which works pretty well

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

https://github.com/welovewordpress/SublimeHtmlTidy

https://github.com/welovewordpress/SublimeHtmlTidy

回答by insaineyesay

For me, the HTML Prettifysolution was extremely simple. I went to the HTML Prettify page.

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

1. Needed the Sublime Package Manager
2. Followed the Instructions for installing the package manager here
3. typed cmd + shift + pto bring up the menu
4. Typed prettify
5. Chose the HTML prettifyselection in the menu

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

Boom. Done. Looks great

繁荣。完毕。看起来很棒

回答by Ricardo Martins

Simply go to

只需转到

Edit -> Tag -> Auto-format tags on document

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

回答by Ross

I created a Package called HTMLBeautifythat does a decent job of reformatting HTML. I based it off of a Perl script I found back in 1997—I updated it to work with all the new fangled modern tags. :)

我创建了一个名为HTMLBeautify的包，它可以很好地重新格式化 HTML。我以 1997 年发现的 Perl 脚本为基础——我更新了它以使用所有新的现代标签。:)

Check it out and let me know what you think!

检查一下，让我知道你的想法！

https://github.com/rareyman/HTMLBeautify

https://github.com/rareyman/HTMLBeautify