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

本文翻译自:How do I reformat HTML code using Sublime Text 2?

I've got some poorly-formatted HTML code that I'd like to reformat. 我有一些格式很差的HTML代码,我想重新格式化。 Is there a command that will automatically reformat HTML code in Sublime Text 2 so it looks better and is easier to read? 是否有一个命令可以自动在Sublime Text 2中重新格式化HTML代码,使其看起来更好并且更易于阅读?


#1楼

参考:https://stackoom.com/question/b5cf/如何使用Sublime-Text-重新格式化HTML代码


#2楼

You don't need any plugins to do this. 您不需要任何插件即可执行此操作。 Just select all lines ( Ctrl A ) and then from the menu select Edit → Line → Reindent. 只需选择所有行( Ctrl A ),然后从菜单中选择“编辑”→“行”→“重新缩进”。 This will work if your file is saved with an extension that contains HTML like .html or .php . 如果您使用扩展名包含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 (eg 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. 如果未保存文件(例如,您只是将其粘贴到新窗口中),则可以在选择“重新缩进”选项之前通过选择菜单“视图”→“语法”→ language of choice的语言”来手动设置缩进的language of choice


#3楼

There's a plugin called SublimeHtmlTidy which works pretty well 有一个名为SublimeHtmlTidy的插件,效果很好

https://github.com/welovewordpress/SublimeHtmlTidy https://github.com/welovewordpress/SublimeHtmlTidy


#4楼

Simply go to 只需转到

Edit -> Tag -> Auto-format tags on document 编辑->标签->自动格式化文档上的标签


#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. 每次输入都会运行HTML Tidy。 There may be drawbacks to this, I'm quite new to Sublime myself, but it seems to do what I want :) 这可能有弊端,我对Sublime还是很陌生,但它似乎可以满足我的要求:)


#6楼

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 eg flush to the left: 我发现,如果标头中的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]--> 
发布了0 篇原创文章 · 获赞 7 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/asdfgh0077/article/details/105244237
今日推荐