Is there an HTML auto-indentation feature or plugin for Sublime Text (aka prettify/beautify/format)?
Solution 1
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.
Solution 2
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 } }
Related videos on Youtube
Dirk Diggler
Updated on September 18, 2022Comments
-
Dirk Diggler almost 2 years
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
andbody
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>
- The built in
-
Dirk Diggler over 11 yearsAs 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.
-
Bibhas over 11 yearswell, Tag worked for me. I used your HTML snippet. It worked flawlessly. And reindent does work for HTML but under some certain conditions.
-
Dirk Diggler over 11 yearstry 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-inLine > Reindent
on this snippet: jsfiddle.net/y8xXj to see how it fails. -
Steven almost 11 yearsFYI - Just tried in Sublime Text 3 with an HTML snippet and it indeed does work!
-
Dirk Diggler almost 11 yearsTried what? Neither
Edit > Line > Reindent
or the Tag plugin worked for me on this snippet in ST3:<p>foo<a>bar<span>baz<span>qux</span></span></a></p>
-
cchiera over 10 yearsSame 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.
-
Dirk Diggler about 10 yearsAs 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>
-
Manuel Arwed Schmidt about 9 yearsWorks for me. Syntax set to HTML?
-
Derek 朕會功夫 over 8 yearsDoes not work for me.
-
Dirk Diggler about 8 yearsI was actually already working with that unchecked. The command you mentioned does absolutely nothing to this snippet in ST3:
<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>
-
vjalle almost 8 yearsYeah, it does a pretty good job, but eventually started dropping, in my case
<div>
opening tags.