Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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>
share|improve this question
    
What is the question? It's not clear from your post what the question is. –  Brad Patton Mar 11 '13 at 14:56
    
Edited title to be interrogative. I'm trying to find some way to auto-indent HTML in Sublime Text. –  zooted Mar 11 '13 at 15:07
    
Also see Formatting HTML Code using Sublime Text 2. –  Karan Mar 11 '13 at 19:39
    
Thanks, I tried each solution in that thread, none of them work. I've listed the reasons why many of them don't work in this thread. –  zooted Mar 12 '13 at 14:10
add comment

3 Answers

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.

share|improve this answer
    
As I mentioned in the original post, the Tag plugin is broken, most particularly in it's handling of inline tags, among other very bad bugs. The author has said he needs to "rewrite the whole thing". The reindent doesn't work for HTML really at all, it doesn't correct indentation; it just aligns tags to a certain indent level. –  zooted Mar 17 '13 at 2:19
    
well, Tag worked for me. I used your HTML snippet. It worked flawlessly. And reindent does work for HTML but under some certain conditions. –  Bibhas Mar 17 '13 at 5:25
    
try using Tag's autoformat on this snippet: <p>foo<a>bar<span>baz<span>qux</span></span></a></p> to see what I mean. It also messes up the formatting of the opening HTML tag wrapped in IE conditional comments that is part of HTML5 Boilerplate (and comments in general). Try using the built-in Line > Reindent on this snippet: jsfiddle.net/y8xXj to see how it fails. –  zooted Mar 17 '13 at 16:36
    
+1 tag solved it ! Thanks –  Enrique Mar 19 '13 at 14:20
1  
Same issue. I've used countless editors in the past, Coda, Sublime, Espresso, Chocolat, TextMate... but none ever have been able to flawlessly format text properly like Dreamweaver's Apply Source Formatting. To which people simply suggest Tidy or some other plugin that never work like Dreamweaver. I'm glad someone "Zooted" see's this issue. It's unfortunate there is still no solution. In Sublime Text 3 as Zooted Noted even with Tag it doesn't work properly (as in his above example). And the native Reindent feature is pretty worthless. –  cchiera Oct 26 '13 at 21:06
show 2 more comments

Select All -> SublimeText -> Edit -> Line -> reindend will do. You can set a short cut key for the same using

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

share|improve this answer
    
As I mentioned in the question, this does not work. Try it on the very first snippet I provided: <section><article><h1></h1><p></p></article></section> –  zooted Jun 9 at 14:06
add comment

There isn't a solution that won't have any problems, but for simple html hierarchy formation I would recommend emmet which you can find in package manager.

Type:

section>article>h1+p

press tab, and you'll get:

<section>
    <article>
        <h1></h1>
        <p></p>
    </article>
</section>
share|improve this answer
2  
The question was about indenting existing HTML though, not creating new hierarchies from scratch. If you already have content or attributes, this won't really work. –  slhck Mar 14 '13 at 8:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.