Is there an HTML auto-indentation feature or plugin for Sublime Text (aka prettify/beautify/format)?

Question

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:

foo<a>barbazqux</a>

results in:

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

Also see [Formatting HTML Code using Sublime Text 2](http://stackoverflow.com/questions/8839753/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. — Dirk Diggler, Mar 12 '13 at 14:10
I think this is the best working solution: http://jsbeautifier.org/ I've had the same requirement of format multiple inline tags. This one works really well. It create proper markup for sublime text as well which can close chunks. It's also available on CLI as https://www.npmjs.com/package/js-beautify — , Dec 26 '16 at 15:39

score 18 · Answer 1 · edited Mar 25 '13 at 19:04

18

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.

edited Mar 25 '13 at 19:04

Dirk Diggler

352
1
2
8

answered Mar 15 '13 at 19:01

Bibhas

2,564
2
17
21

1

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. – Dirk Diggler Mar 17 '13 at 02: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 05:25
try using Tag's autoformat on this snippet: `
foobarbazqux
` 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: http://jsfiddle.net/y8xXj/ to see how it fails. – Dirk Diggler Mar 17 '13 at 16:36
FYI - Just tried in Sublime Text 3 with an HTML snippet and it indeed does work! – Steven Sep 03 '13 at 17:57
Tried what? Neither `Edit > Line > Reindent` or the Tag plugin worked for me on this snippet in ST3: `
foobarbazqux
` – Dirk Diggler Sep 05 '13 at 13:40
2

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. – TechRemarker Oct 26 '13 at 21:06

score 7 · Answer 2 · edited May 23 '17 at 12:41

7

Select All -> Edit menu -> Line -> Reindend will do. You could set a shortcut combination for the same use.

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

edited May 23 '17 at 12:41

Community

1

answered Jun 09 '14 at 10:20

Jasim Mahmood

79
1
1

1

As I mentioned in the question, this does *not* work. Try it on the very first snippet I provided:
– Dirk Diggler Jun 09 '14 at 14:06
Works for me. Syntax set to HTML? – Manuel Arwed Schmidt Jun 22 '15 at 13:47
2

Does not work for me. – Derek 朕會功夫 Feb 29 '16 at 20:07
Yeah, it does a pretty good job, but eventually started dropping, in my case `
` opening tags.
– ruffin Aug 20 '16 at 14:24

score 1 · Answer 3 · edited Aug 18 '23 at 09:43

1

JsPrettier is plugin for Prettier, a configurable code formatter.

edited Aug 18 '23 at 09:43

ﾤﾡ

3,875
1
19
18

answered Aug 29 '22 at 23:55

Dirk Diggler

352
1
2
8

score -1 · Answer 4 · answered Jun 18 '16 at 12:25

-1

In order for the Reindent feature to work, you have to uncheck the option for "Indent Using Spaces":

View >> Indentation >> Indent Using Spaces

Once this option has been unchecked, you can select your text and Reindent:

Edit >> Line >> Reindent

This will work for HTML syntax as well as XML. Not tested it on any others.

answered Jun 18 '16 at 12:25

Sidz

1
1

I was actually already working with that unchecked. The command you mentioned does absolutely nothing to this snippet in ST3: `
foobarbaz
` – Dirk Diggler Jun 18 '16 at 18:07

Is there an HTML auto-indentation feature or plugin for Sublime Text (aka prettify/beautify/format)?

4 Answers4

Linked