Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I beautify JavaScript code using Command Line?

First, pick your favorite Javascript based Pretty Print/Beautifier. I prefer the one at http://jsbeautifier.org/, because it's what I found first. Downloads its file https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

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 -cp js.jar 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

//original code    
(function() { ... js_beautify code ... }());

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

Rhino gives javascript a few extra useful functions that don't necessarily 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 -cp js.jar 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.


UPDATE April 2014:

The beautifier has been rewritten since I answered this in 2010. There is now a python module in there, an npm Package for nodejs, and the jar file is gone. Please read the project page on github.com.

Python style:

 $ pip install jsbeautifier

NPM style:

 $ npm -g install js-beautify

to use it (this will return the beatified js file on the terminal, the main file remains unchanged):

 $ js-beautify file.js

To make the changes take effect on the file, you should use this command:

$ js-beautify -r file.js

Original answer

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"). So you can use V8 instead of rhino.

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 (no longer works, jar file is gone)

  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"


If you're using nodejs then try uglify-js

On Linux or Mac, assuming you already have nodejs installed, you can install uglify with:

sudo npm install -g uglify-js

And then get the options:

uglifyjs -h

So if I have a source file foo.js which looks like this:

// foo.js -- minified
function foo(bar,baz){console.log("something something");return true;}

I can beautify it like so:

uglifyjs foo.js --beautify --output cutefoo.js

uglify uses spaces for indentation by default so if I want to convert the 4-space-indentation to tabs I can run it through unexpand which Ubuntu 12.04 comes with:

unexpand --tabs=4 cutefoo.js > cuterfoo.js

Or you can do it all in one go:

uglifyjs foo.js --beautify | unexpand --tabs=4 > cutestfoo.js

You can find out more about unexpand here

so after all this I wind up with a file that looks like so:

function foo(bar, baz) {
    console.log("something something");
    return true;
}

update 2016-06-07

It appears that the maintainer of uglify-js is now working on version 2 though installation is the same.


On Ubuntu LTS

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js

For in place beautifying, any of the follwing commands:

$ js-beautify -r file.js
$ js-beautify --replace file.js

In the console, you can use Artistic Style (a.k.a. AStyle) with --mode=java.
It works great and it's free, open-source and cross-platform (Linux, Mac OS X, Windows).


You have a few one liner choices. Use with npm or standalone with npx.

Semistandar

npx semistandard "js/**/*.js" --fix

Standard

npx standard "js/**/*.js" --fix

Prettier

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"