Monday, November 19th, 2007
JavaScript Beautify
Category: JavaScript
, Utility
We often talk about the latest scheme for compressing and minimizing our JavaScript. The JavaScript Beautify script aims to do the opposite.
Often, you find a site that is doing something interesting and you want to learn how it works. You check out the source and it is cryptic gibberish. This is where the beautifier comes in to make it a touch more readable.
For example, it can take:
JAVASCRIPT:
-
-
/* paste in your own code and press Beautify button */var latest_changes=new Object({'2007-10-17':'Many, many fixes and improvements. Processing speed is also back.','... who cares ...','2007-02-08':'Initial release'});var a=b?(c%d):e[f];
-
and gives you:
JAVASCRIPT:
-
-
/* paste in your own code and press Beautify button */
-
var latest_changes = new Object({
-
'2007-10-17': 'Many, many fixes and improvements. Processing speed is also back.',
-
'... who cares ...',
-
'2007-02-08': 'Initial release'
-
});
-
var a = b ? (c % d) : e[f];
-
4.5 rating from 29 votes
Interesting.
Here’s one I wrote a few months ago as a comparison. http://verens.com/archives/2007/02/23/javascript-beautifier/
Mine is actually written in JavaScript.
qooxdoo also comes with a full blown JavaScript parser on python basis. There is also a module which can pretty print the syntax tree to well-formed JavaScript. The pretty printer itself is also configurable to different standards.
You may also look at Miguel’s (of Mono) related post some days ago:
http://tirania.org/blog/archive/2007/Nov-16-1.html
Nice post because I happen to have a use for this today. ;-)
Compared the output to the one that Kae Verens mentioned/wrote. The output is pretty similar other than that the new one does a better job at managing whitespace.
I really like Aptana for its code formatter - which does a good job at formatting JS code - it doesn’t go as far as other Eclipse-based formatters for beautifying scripting language code in terms of customizable formatting rules, but it still works nicely to help coding well-structured JS source.
Awesome post. I just happen to be curious about a piece of google analytics code today and this helped quite a bit.
One minor thing i noticed though:
var a = b ? (c % d) : e[f];
Looks like it doesn’t translate this into a formal if and else clause. It’s very minor to ppl who don’t mind the shortened syntax.
@Simon, I know some people prefer the longer if…else form, but personally, I like short ternary code. I think the point of this is not to change code - just make it more readable.
I’m with Kae in preferring ternary clauses (and I think most other people would agree, especially in the case of a beautifier which is meant to increase readability). Expanding ternary clauses wouldn’t really be an option for these JavaScript beautifiers since ternary clauses tend to be embedded all over the place and there isn’t an equivalent to a code block such as:
SomeLib.someMethod(someVar ? 37 : (someOtherVar > 0 ? someOtherVar : -1));
without doing some pretty complex code analysis.
Hmm, problem is that won’t work well for huge scripts. Last time i tried it with a huge one it crashed. There is another one that works good with large scripts and is faster.
It uses to built in toString()-funtions in the browser and is like 4 lines long:
>JSTidy
The script, however, has to be valid.
There is a disclaimer though - since it uses the built in function in the browser:
For best results, use Opera, Safari or Konqueror on this page. It partially works in Firefox (nested functions are not tidied, meaning that most scripts you want to tidy still end up unreadable), and fails to reformat code in IE and iCab.
Hi everybody!
So, i translate it from php to javascript :)
http://my.opera.com/Vital/blog/2007/11/21/javascript-beautify-on-javascript-translated
http://prettyprinter.de/ .. I think this one’s been around since 2003 or something? A personal favourite.
Thanks for posting this, I’m sure it can be useful. I will check it out more soon.
Janine, IT Freelancer currently working on the lose 60 pounds project.
That is great! I’ve been looking for something like that for a long time so it’s perfect. Thanks!
Boyd, Freelancer currently working on the lose 20 pounds in 10 days project.