How do I reformat HTML code using Sublime Text 2?

Solution 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.

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.

Solution 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:

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.

Solution 3:

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.

Solution 4:

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

After the installation, just select the code and press CTRL+SHIFT+H.

Done!