How do I reformat HTML code using Sublime Text 2?

 

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?

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 .

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.

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:

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
  • Doesn't properly format <script> blocks

    • Tag

    Pros:

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

    • Cons:

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

    • HTMLTidy

    Pros:

  • Handles PHP tags
  • Some settings to tweak formatting

    • Cons:

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

    • HTMLBeautify

    Pros:

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

    • Cons:

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

    • HTML-CSS-JS Prettify

    Pros:

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

    • Cons:

  • Requires Node.js
  • Not great for embedded PHP

    • Which is best?

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

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

    You can install it using the package control. 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.

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

    链接地址: http://www.djcxy.com/p/15326.html

    上一篇: 如何在Eclipse中为Java文本编辑器更改字体大小？

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