By josh / January 18, 2014

Formatting HTML with Sublime Text

It’s almost quitting time, and the only thing standing between you and a relaxing evening is the one task you’ve been avoiding all day: Posting photos from the employee recognition dinner on the company intranet site.

A simple enough task, it would seem. But “intranet” is such a lofty term to apply to that rats nest of static HTML pages. It was originally assembled (you won’t deign to use the word “coded”) in Dreamweaver by a long-forgotten secretary when you were still in middleschool and IE3 was the hot new browser.

HTML5? CSS layouts? Semantic markup? Ha! This intranet never met a table it couldn’t nest.

And the formatting … As if tables within tables within tables weren’t hard enough to work with, the HTML looks like it was indented by a macaque after a couple of stiff shots of Jim Beam.

But the updates are due today, and there’s no getting around it.

You fire up Sublime Text, and wonder …

What’s the best way to untangle this gnarled mess?

To find out, I put several of the most popular HTML formatting Sublime Text plugins through their paces and compared the results.

For the tests, I used a nasty HTML test file courtesy of the creator of the HTML Beautify plugin (thanks, Ross!). This file includes just about every formatting misdeed ever conceived by the human mind, including misaligned code blocks, copious amounts of extra white space, pre formatted text and inline comments.

I ran two tests on each plugin–one with the test file as is, and a second one with a minified version of the file.

Which plugin came out on top? Let’s see how they stacked up.

Sublime’s build-in Reindent command

The Reindent command is handy for quickly formatting a messy block of HTML. No need to install anything here, just select the HTML you want to format and click Edit | Line | Reindent. You can also run the Indentation: Reindent Lines command from the command palette.

Reindent did a passable job on the test file. It didn’t delete any of the extraneous blank lines, but most of the HTML was properly indented.

One common complaint with this built-in formatting is the way it handles–or rather, doesn’t handle–multiple opening tags on one line. Due to this limitation, it utterly failed on the minified HTML file. There was literally no difference after running the command.

Reindent’s main virtue is convenience. It’ll get the job done in simple scenarios, but if you have more complex needs, you’ll want a plugin.

Tag

The Tag plugin, available for Sublime Text 3, is far and away the most popular plugin that offers HTML formatting. It also offers a handful of additional features that are useful when working with HTML and XML files, including niceties like strip attributes, autoclose on slash, close tags, and a new tag linting feature.

Unlike many of the other options, Tag doesn’t depend on any external binaries like Node.js or PHP.

To use Tag to format an HTML file, install the plugin, then run click Edit | Tag | Auto-Format Tags on Document, or run Tag: Auto-Format Tags on Document in the command palette.

Tag handled both tests fairly well. It was able to expand the minified file properly, and the formatting was reasonable on both files. Extra blank lines were removed properly. It didn’t align the tags in an embedded <script> block early in the file.

But Tag choked hard when it hit a PHP tag midway through the document. From that point forward, the indentation was hosed.

HTMLTidy

HTMLTidy is the second most popular option behind Tag. This plugin relies on the libtidy utility, which comes with PHP 5. To use it, you’ll need to have PHP installed and available in your system path. If PHP isn’t installed, the plugin falls back to a web service. HTMLTidy is ST2 only at this time.

It offers some settings that allow you to tweak the formatting–you can specify how to handle <br>, for example, and how many spaces to use for indentation.

To use the plugin, just run Tidy HTML in the command palette.

My test machine didn’t have PHP installed, so I used the web service fallback for my trials. Calling the web service caused a noticable delay, but it wasn’t bad, maybe a second or two. A slow network connection or larger file size would likely make this option less viable.

The plugin did a good job formatting both versions of the test file. It handled the embedded PHP scripting with no issues, and correctly removed the extra white space.

My main hesitation with this plugin is its seeming lack of support. It’s only available for Sublime Text 2, and as of this writing the plugin’s GitHub repository seemed dormant. Is this project dead?

HTML-CSS-JS Prettify

The HTML-CSS-JS Prettify plugin is the most flexible and feature-rich of the plugins I evaluated. Available for Sublime Text 2 and Sublime Text 3, this plugin handles HTML, CSS, JavaScript and JSON files. It integrates well with the Sublime user interface–you can run it from the command palette, keyboard shortcuts or the right-click context menu, and there’s an option to run a format every time you save a file.

By creating a .jsbeautifyrc file in your project, you can customize how you want your files formatted, including blank lines, tags to leave inline (like <a> tags) and indent size.

On the downside, HTML-CSS-JS Prettify requires Node.js to run. I always hate having to install external tools just to get a plugin working, but Node.js is pretty ubiqutious these days. I was testing on a Windows system, so I downloaded the portable version of Node and put it in Dropbox so it would sync between machines. The plugin allows you to specify the path to the Node.js executable, and after a little fiddling I got it working.

HTML-CSS-JS Prettify performed well on both the minified and unminified versions of the test files, indenting all of the HTML tags to my satisfaction. It didn’t remove the extra blank lines in the file or indent the JavaScript inside of a <script> block, but these are both settings that can be overriden in a .jsbeautifyrc file.

The one drawback I could see was the plugin’s handling of PHP code. It formatted a multi-line PHP script into a single line.

Other options

In addition to the main contenders above, there are currently three other HTML formatting plugins worth mentioning.

HTMLBeautify

The HTMLBeautify plugin is a basic script that assumes your HTML is already partially formatted with tags on separate lines. It doesn’t work well with inline comments. HTMLBeautify is ST2 only.

TidyHTML5

If you’re only interested in formatting HTML5, the TidyHTML5 plugin might be an option. While it uses an external utility to perform formatting, it comes bundled for Windows users. TidyHTML5 is ST2 only.

SublimeLinter-html-tidy

One of the newest options is SublimeLinter-html-tidy, which is a plugin for the fast-growing SublimeLinter 3 plugin. (Yep, it’s a plugin within a plugin.)

This plugin requires the tidy executable, which is preinstalled on OS X and is also available for Windows and Linux.

And the winner is …

From my review, HTML-CSS-JS Prettify seems like the best option due to its customizability, ongoing support and superior integration with Sublime.

I definitely plan to keep my eye on SublimeLinter-html-tidy as well, though. There’s an entire ecosystem of plugins developing around SublimeLinter project, and I wouldn’t be surprised to see this one gain popularity.

What do you think? Did I miss your favorite option? Let me know in the comments.

P.S. Don’t miss your chance to get more done with Sublime! Sign up for my free Sublime Text Tips newsletter to get more tips every week. As a bonus, I’ll send you a FREE 12-page guide to Sublime’s advanced editing features so you can start using Sublime more effectively–today.

About the author

josh

5comments
Tom Livingston - January 23, 2014

HTMLTidy seemed confused by the article element and moved the closing tag to before it’s content so [content] became [content].

Reply
Tom Livingston - January 23, 2014

Ooops. Not sure how to demonstrate the code. Should have been:

‘article’ [content] ‘/article’ became ‘article’ ‘/article’ [content]

Reply
Oleksandr Hutsulyak - July 16, 2014

Really useful plugin 🙂 Thanks for a tip.

Reply
wonky - September 20, 2014

the problem is none of these seem to delete blank lines from what I can work out, they will delete trailing spaces but not blank lines. Am I missing something. Using HTML-CSS-JS Prettify .

thanks

Reply
niico - April 25, 2016

The heading should read “built in” not “build in”

thx.

Reply
Click here to add a comment

Leave a comment: