N HTML auto-indentation feature or plugin for Sublime Text (aka prettify/beautify/format)

autoindenthtmlsublime-text-2

For example, something to change:

<section><article><h1></h1><p></p></article></section>

to:

<section>
  <article>
    <h1></h1>
    <p></p>
  </article>
</section>

…that works on full pages and snippets.

  • The built in Edit > Line > Reindent setting doesn't do this
  • The plugin HTMLTidy adds head and body tags, so it doesn't work for partials, it also has various other issues
  • The plugin Tag has various issues, enough that it essentially doesn't work
  • The plugin HTMLPrettify has various issues, requires node.js, and hasn't been updated in months
  • gist.github.com/mcdonc/3898894 claims to do it, but requires Emacs

(Notepad++ had auto-indent, Dreamweaver had Apply Source Formatting, Aptana has Format, etc.)

The Tag plugin handles inline tags incorrectly, for example using it on this snippet:

<p>foo<a>bar<span>baz<span>qux</span></span></a></p>

results in:

<p>
    foo
    <a>
        bar
        <span>
            baz
            <span>qux</span>
        </span>
    </a>
</p>

Best Answer

The reindent doesn't always work for snippets. You can use the Tag plugin(install from package control). Then just press ctrl+shift+p, and type tag. You'll see the option Auto-Format tags on document. Select and press Enter. That'll do it.

Related Question