How can I beautify JavaScript code using Command Line?

Question

I am writing a batch script in order to beautify JavaScript code. It needs to work on both Windows and Linux.

How can I beautify JavaScript code using the command line tools?

Adiel

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. prettydiff.com/?m=beautify – Sarah

Answer 1

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.

Roberge

the link you have given is broken, it should be this one i think, jsbeautifier.org – Upsweep

How I did it: :~$ sudo apt-get install libv8-dev libv8-2.2.18 :~$ cd einars-js-beautify-f90ce72/v8 :~$ g++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread It just works. Thanks to Einar Lielmanis and everyone involved! – Compaction

These seems to be a moving target. Now the info on jsbeautifier site says it's written in python. – Semiconscious

update for cmdline users, the following repo has easy to install stand alone command line tools for pretty printing js: github.com/einars/js-beautify.git – Rackrent

Use a modern JS approach using Grunt: #19485 – Profitable

You can run this very easily without java from node. There is an npm package called js-beautify. After installing it you can run the command js-beautify passing the files you want as a paramter. For details see: npmjs.com/package/js-beautify – Grider

I must be doing something wrong. I'm getting js: uncaught JavaScript runtime exception: ReferenceError: "js_beautify" is not defined. after running the command java -jar js.jar beautify.js my-ugly-javascript.js. I added the print(js_beautify(readFile(arguments[0]))); to the bottom of the beautify.js and am running Rhino 1.7.7. Any ideas? – Hutton

I found it didn't like the notation (function() { ..blah.. }()); and so it never executed this code. I commented out the first (function() { and the last }()); and it began to work. There you go :) – Hutton

You'll need to refer to global.js_beautify. I'll see about making an edit. – Oxa

Answer 2

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"

Ostrich

Or if you prefer python over v8, there's also a python module in there now. – Cannice

The npm package is called js-beautify – Grider

I got syntax errors from beautify, but not from uglifyjs below. – Subhead

Answer 3

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.

Panda

This is the correct answer for a command line JavaScript code beautifer. – Peregrinate

uglifyjs -b does a lot more than just fix indentation, it rearranges and rewrites the code, perhaps for efficiency. That's not what I wanted. I was using an older version, in Ubuntu 14.04. – Evapotranspiration

Could you please explain a little more how uglifyjs -b rearranges and rewrites code? – Panda

Answer 4

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

Wilde

The best answer at the moment. For inplace beautify use js-beautify -o file.js file.js – Durance

use -r, --replace Write output in-place, replacing input js-beautify -r file.js – Convenient

Answer 5

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"

Halcomb

Note that the commands listed overwrite the original files. Make backups first or work in a version controlled folder to make it easy to go back if wanted. – Dagley

Answer 6

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).

Kennithkennon

Answer 7

I'm not able to add a comment to the accepted answer so that's why you see a post that should have not existed in the first place.

Basically I also needed a javascript beautifier in a java code and to my surprise none is available as far as I could find. So I coded one myself entirely based on the accepted answer (it wraps the jsbeautifier.org beautifier .js script but is callable from java or the command line).

The code is located at https://github.com/belgampaul/JsBeautifier

I used rhino and beautifier.js

USAGE from console: java -jar jsbeautifier.jar script indentation

example: java -jar jsbeautifier.jar "function ff() {return;}" 2

USAGE from java code: public static String jsBeautify(String jsCode, int indentSize)

You are welcome to extend the code. In my case I only needed the indentation so I could check the generated javascript while developing.

In the hope it'll save you some time in your project.

Imprecation

Answer 8

Use the modern JavaScript way:

Use Grunt in combination with the jsbeautifier plugin for Grunt

You can install everything easily into your dev environment using npm.

All you will need is set up a Gruntfile.js with the appropriate tasks, which can also involve file concatenation, lint, uglify, minify etc, and run the grunt command.

Profitable

Answer 9

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

1. Download the latest stable Rhino and unpack it somewhere, e.g. ~/dev/javascript/rhino
2. Download beautify.js which is referenced from aforementioned jsbeautifier.org then copy it somewhere, e.g. ~/dev/javascript/bin/cli-beautifier.js

3. Add this at the end of beautify.js (using some additional top-level properties to JavaScript):

   // Run the beautifier on the file passed as the first argument.
   print( j23s_beautify( readFile( arguments[0] )));
   

4. Copy-paste the following code in an executable file, e.g. ~/dev/javascript/bin/jsbeautifier.sh:

   #!/bin/sh
   java -cp ~/dev/javascript/rhino/js.jar org.mozilla.javascript.tools.shell.Main ~/dev/web/javascript/bin/cli-beautifier.js $*
   

5. (optional) Add the folder with jsbeautifier.js to PATH or moving to some folder already there.

Starknaked

Answer 10

I believe when you asked about command line tool you just wanted to beautify all your js files in batch.

In this case Intellij IDEA (tested with 11.5) can do this.

You just need to select any of your project files and select "Code"->"Reformat code.." in main IDE menu. Then in the dialog select "all files in directory ..." and press "enter". Just make sure you dedicated enough memory for the JVM.

Shrapnel