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>