How to Reformat HTML Code Using Sublime Text 2

How do I reformat HTML code using Sublime Text 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.
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.

How to proper format/indent HTML and PHP Code in Sublime Text 3

Thanks a lot for your answer, but i found a nice, built in approach of sublime text. Just select everything (CTRL + a (Windows) or CMD + a (Mac) and click this in the menu

Edit → Line → Reindent

maybe this helps also others

EDIT(2017): You can also use key combination (without need for mouse)

CTRL + SHIFT + P (Windows)
CMD + SHIFT + P (Mac)

then type 'Reindent' and select the fist option 'Indentation: Reindent Lines'

Sublime Text 2: Format HTML tags' content in one line

Note: This solution works only in ST2, because at this moment (7/31/14) HTMLTidy is not available for ST3.

I figured a temporary solution, not ideal by any means, but...

Go to: Preferences -> Key Bindings - User. You will be editing the file Default (Windows).sublime-keypmap.

Add these two instructions to that file (note that the instructions need to be inside the [ ] brackets):

 [
   { "keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}},
   //Indent code -- http://stackoverflow.com/questions/8839753/formatting-html-code-using-sublime-text-2

   { "keys": ["ctrl+alt+t"], "command": "html_tidy"}
   //HTMLTidy key binding
 ]

Save the file.
Make sure you have HTMLTidy installed. Open HTMLTidy's Settings file HtmlTidy.sublime-settings: Preferences -> Package Settings -> HtmlTidy -> Settings - Default.
Look for "indent": true, (include double quotes and comma) and change it to false.
Save the file.
Go back to your HTML file and select a section of the code you want to format in one line. Yes, it doesn't work if you select the entire markup o_O. It will only leave what's inside the <body> tag, and it will delete everything else (<html>, <head>, etc).
Press CTRL+ALT+T to execute TidyHTML. This will shrink your markup and make the tags in one line.
Finally press CTRL+SHIFT+R to execute the indentation.

Good luck.

How do you format code in Sublime Text editor 3

First, install Package Control, the package manager for Sublime Text. Next, you need to install packages that do what you're after: beautify code or maybe just indent it.

Sublime Text 2 Code Formatting

I can't speak for the 2nd or 3rd, but if you install Node first, Sublime-HTMLPrettify works pretty well. You have to setup your own key shortcut once it is installed. One thing I noticed on Windows, you may need to edit your path for Node in the %PATH% variable if it is already long (I think the limit is 1024 for the %PATH% variable, and anything after that is ignored.)

There is a Windows bug, but in the issues there is a fix for it. You'll need to edit the HTMLPrettify.py file - https://github.com/victorporof/Sublime-HTMLPrettify/issues/12

Indenting code in Sublime text 2?

You can find it in Edit → Line → Reindent, but it does not have a shortcut by default.
You can add a shortcut by going to the menu Preferences → Keybindings → User, then add there:

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

(example of using the F12 key for that functionality)

The config files use JSON-syntax, so these curly braces have to be placed comma-separated in the square-brackets that are there by default. If you don't have any other key-bindings already, then your whole Keybindings → User file would look like this, of course:

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

How to set HTML Auto Indent format on Sublime Text 3?

One option is to type [command] + [shift] + [p] (or the equivalent) and then type 'indentation'. The top result should be 'Indendtation: Reindent Lines'. Press [enter] and it will format the document.

Another option is to install the Emmet plugin (http://emmet.io/), which will provide not only better formatting, but also a myriad of other incredible features. To get the output you're looking for using Sublime Text 3 with the Emmet plugin requires just the following:

p [tab][enter] Hello world!

When you type p [tab] Emmet expands it to:

<p></p>

Pressing [enter] then further expands it to:

<p>

</p>

With the cursor indented and on the line between the tags.
Meaning that typing text results in:

<p>
    Hello, world!
</p>