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

Question

I have a question while I'm writing HTML code on Sublime Text 3. I just want to set auto indent format of HTML. For example, when I write p tag like under code, the indentation works like that.

<p>
Hello world!
</p>

But I want to write like under code instead of above.

<p>
  Hello world!
</p>

And not only p tag also ul, ol and etc.

How can I set auto indent format of HTML on Sublime Text 3?

Answer 1

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>