如何使用崇高的文本2重新格式化HTML代码?

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代码想要重新格式化。是否有一个命令可以自动地将HTML代码重新格式化，从而使它看起来更好，更容易阅读?

15 个解决方案

#1

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 .html or .php.

您不需要任何插件来实现这一点。选择所有行(Ctrl),然后从菜单中选择编辑→线→Reindent。如果您的文件被保存为包含. HTML或.php等HTML的扩展名，那么这将有效。

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 choice before selecting the reindent option.

如果你的文件没有保存在你(如粘贴一个片段一个新窗口),你可以通过选择菜单手动设置缩进的语言语法视图→→选择reindent选项前的语言选择。

#2

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 blog for full details), but here's a quick overview of some of the most popular options:

有半打左右的方式来格式化HTML。我已经测试了每个最受欢迎的插件(参见我在我的博客上所做的详细信息)，但是这里有一些最流行的选项的概述:

Reindent command

Pros:

优点:

• Ships with Sublime, so no plugin install needed
• 提供崇高，所以不需要插件安装

Cons:

缺点:

• Doesn't delete extra blank lines
• 不删除额外的空行。
• Can't handle minified HTML, lines with multiple open tags
• 不能处理缩小的HTML，有多个开放标签的行
• Doesn't properly format <script> blocks
• 未正确格式化 <脚本> 块

Tag

Pros:

优点:

• Supports ST2/ST3
• 支持ST2 / ST3
• Removes extra blank lines
• 删除多余的空白行
• No binary dependencies
• 没有二进制依赖关系

Cons:

缺点:

• Chokes on PHP tags
• 呛到PHP标签
• Doesn't handle <script> blocks correctly
• 无法正确处理

HTMLTidy

Pros:

优点:

• Handles PHP tags
• 处理PHP标签
• Some settings to tweak formatting
• 一些设置可以调整格式

Cons:

缺点:

• Requires PHP (falls back to web service)
• 需要PHP(返回到web服务)
• ST2 only
• ST2只
• Abandoned?
• 放弃了吗?

HTMLBeautify

Pros:

优点:

• Supports ST2/ST3
• 支持ST2 / ST3
• Simple and no binaray dependencies
• 简单且没有binaray依赖项
• Support for OS X, Win and Linux
• 支持OS X, Win和Linux

Cons:

缺点:

• Chokes a bit with inline comments
• 用内联注释做一些选择。
• Does expand minimized/compressed code
• 扩大最小化/压缩代码吗

HTML-CSS-JS Prettify

Pros:

优点:

• Supports ST2/ST3
• 支持ST2 / ST3
• Handles HTML, CSS, JS
• 处理HTML,CSS,JS
• Great integration with Sublime's menus
• 与崇高的菜单很好的结合
• Highly customizable
• 高度可定制的
• Per-project settings
• 项目的设置
• Format on save option
• 格式保存选项

Cons:

缺点:

• Requires Node.js
• 需要node . js
• Not great for embedded PHP
• 对于嵌入式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美化是胜利者。有很多很棒的功能，没什么可抱怨的。

#3

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 tag and hit enter.

在安装包控制。转到包控件(首选项->包控件)，然后输入install，点击enter。然后输入标签并按回车键。

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

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

#4

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

我推荐这个插件:HTML/CSS/JS美化，它真的有用。

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

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

Done!

完成了!

#5

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。这可能有缺点，我对升华自己很陌生，但它似乎做了我想做的:

#6

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的，我还想提供一些关于如何为崇高的文本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 2 if 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(编辑- > - > reindent行),或者你可以使用JsFormat格式化插件崇高文本2如果你想有更多的可定制的设置如何格式化代码添加到崇高文本的默认选项卡/缩进设置。

https://github.com/jdc0589/JsFormat

https://github.com/jdc0589/JsFormat

You can easily install JsFormat with using Package Control (Preferences -> Package Control) Open package control then type install, hit enter. Then type js format and 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)

您可以轻松地使用包控件(首选项->包控制)打开包控制，然后输入安装，按回车键。然后输入js格式，点击回车，就完成了。(包控制器将显示安装的状态，在Sublime的左下角有成功和错误)

Add the following line to your key bindings (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, JsFormat is a good plugin, worth to try it!

我使用ctrl + alt + 2，你可以随意改变快捷键。到目前为止，JsFormat是一个很好的插件，值得尝试一下!

Hope this will help someone.

希望这能帮助某人。

#7

There's a plugin called SublimeHtmlTidy which works pretty well

有一个插件叫做SublimeHtmlTidy，它运行得很好。

https://github.com/welovewordpress/SublimeHtmlTidy

https://github.com/welovewordpress/SublimeHtmlTidy

#8

Simply go to

简单地去

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

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

#9

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

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

1. Needed the Sublime Package Manager
2. 需要卓越的包装经理
3. Followed the Instructions for installing the package manager here
4. 按照安装包管理器的说明
5. typed cmd + shift + p to bring up the menu
6. 键入cmd + shift + p来弹出菜单。
7. Typed prettify
8. 类型修饰
9. Chose the HTML prettify selection in the menu
10. 在菜单中选择HTML美化选择

Boom. Done. Looks great

繁荣。完成了。看起来不错

#10

I created a Package called HTMLBeautify that 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

#11

I am yet to have the privilege to comment so this is simply additional information related to @peter's answer above answer.

我还没有特权评论，所以这只是与@peter的回答相关的附加信息。

I found HTML did not align as expected if IE conditional comments in the header were not completely in-line e.g. flush to the left:

我发现HTML并没有如预期的那样对齐，如果在header中有条件注释并不是完全在线的，例如左对齐:

<!--[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]--> 

#12

There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.

有一个不错的开源CodeFormatter插件，它(沿着重插入)可以美化脏代码，即使所有代码都在一行中。

#13

you can set shortcut key F12 easy!!!

你可以设置快捷键F12容易!!

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

see detail here.

在这里看到的细节。

#14

I think this is what you're looking for:

我想这就是你要找的:

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

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

#15

I'm using tidy together with custom build system to prettify HTML.

我使用tidy和自定义构建系统来美化HTML。

I have HTMLTidy.sublime-build in my Packages/User/ directory:

我有HTMLTidy。sublime-build in my Packages/User/ directory:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

and tidy_config.cfg file in the same directory:

和tidy_config。同一目录下的cfg文件:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

And just select build system and press ctrl+b or cmd+b to reformat file content. One minor issue with that is that ST2 does not automatically reload the file so to see the results you have to switch to some other file and back (or to other application and back).

选择build system并按ctrl+b或cmd+b重新格式化文件内容。其中一个小问题是ST2不会自动重新加载文件，因此要查看结果，您必须切换到其他文件和后面(或其他应用程序和后面)。

On Mac I've used macports to install tidy, on Windows you'd have to download it yourself and specify working directory in the build system, where tidy is located:

在Mac上，我使用macports安装tidy，在Windows上，你必须自己下载并在构建系统中指定工作目录，tidy位于以下位置:

"working_dir": "c:\\HTMLTidy\\"

or add it to the PATH.

或者添加到路径中。