Javascript Beautifier

Question

I am looking for a code beautifier that supports javascript and works on both windows and linux and can be used in batch scripts. Any recommendations?

Answer 1

Usually I only have to do code compression with Javascript, in which case Yahoo! puts out an excellent utility which reduces javascript code to the absolute minimum (renaming variables, removing whitespace, etc) to make it better for production server efficiency. YUI Compressor

For code beautification, Aptana puts out an IDE (and an Eclipse plugin, I believe) for JavaScript development that should be able to do code formatting. I don't think it can do batch scripts however. I think Eclipse can do batch processing though, so you may want to look into how the Eclipse plugin could be integrated with Eclipse for code beautification.

Answer 2

Depending upon how well you script sometimes its a good idea to inspect your code before you compact it. I suggest JSLint, personally. Browsers are made to eat such crap, frequently I find myself working C# and forgetting some minor JavaScript items.

For instance, I never tended to use ===/!== when comparing variables against null, true, false, 0, or "", but apparently its a best practice over ==/!= since it doesn't employ typecasting.

A VisualStudio 2008 JSLint plugin' would rule the house.

Answer 3

So far I have found a couple of online ones:

• JavaScript Beautifier
• Beautify Javascript

Still looking for something I can ran from the command line.

Answer 4

First, pick your favorite Javascript based Pretty Print/Beautifier. I prefer the one at http://jsbeautifier.org/, because it's what I found first.

Second, download and install The Mozilla group's Java based Javascript engine, Rhino. "Install" is a little bit misleading; Download the zip file, extract everything, place js.jar in your Java classpath (or Library/Java/Extensions on OS X). You can then run scripts with an invocation similar to this

java org.mozilla.javascript.tools.shell.Main name-of-script.js

Use the Pretty Print/Beautifier from step 1 to write a small shell script that will read in your javascript file and run it through the Pretty Print/Beautifier from step one. For example

//new code
print(js_beautify(readFile(arguments[0])));

//original code    
function js_beautify(js_source_text, indent_size, etc...

Rhino gives javascript a few extra useful functions that don't necesarily make sense in a browser context, but do in a console context. The function print does what you'd expect, and prints out a string. The function readFile accepts a file path string as an argument and returns the contents of that file.

You'd invoke the above something like

java org.mozilla.javascript.tools.shell.Main beautify.js file-to-pp.js

You can mix and match Java and Javascript in your Rhino run scripts, so if you know a little Java it shouldn't be too hard to get this running with text-streams as well.

Answer 5

This is a free stand-alone beautifier (and much more):

http://www.yaldex.com/Free_JavaScript_Editor.htm

Answer 6

My Pretty Diff tool is written entirely in JavaScript so it works equally well on all operating systems. It supports beautification and minification of JavaScript, CSS, any markup language that uses XML style delimiters, including HTML.

http://mailmarkup.org/prettydiff/prettydiff.html

Answer 7

The problem with allot of beautifiers is the choice of output and filtering and the sever lack of serious command line beautifiers. I've recently begun modifying YUI compressor to beautify code. If you want to make your own beautifier I have to highly recommend this approach. YUI is open source and comes with an ant build file making it very easy to alter and compile.

Answer 8

Does anyone know of a beautifier with an option to NOT add pointless spaces, so it can output lean syntax instead of I-learned-JavaScript-from-Microsoft syntax?

//lean
if('this_is'==/an_example/){
    doSomething();
}

//Microsofty
if ('this_is' == /an_example/) {
    doSomething();
}

Answer 9

Adding to Answer of @Alan Storm

the command line beautifier based on http://jsbeautifier.org/ has gotten a bit easier to use, because it is now (alternatively) based on the V8 javascript engine (c++ code) instead of rhino (java-based JS engine, packaged as "js.jar")

How to use:

download jsbeautifier.org zip file from http://github.com/einars/js-beautify/zipball/master

(this is a download URL linked to a zip file such as http://download.github.com/einars-js-beautify-10384df.zip)

old (still works)

  java -jar js.jar  name-of-script.js

new (alternative)

install/compile v8 lib FROM svn, see v8/README.txt in above-mentioned zip file

  ./jsbeautify somefile.js

-has slightly different command line options than the rhino version,

-and works great in Eclipse when configured as an "External Tool"

Answer 10

I've written an article explaining how to build a command-line JavaScript beautifier implemented in JavaScript in under 5 minutes. YMMV.

Cheers!
Shonzilla