如何使用命令行美化 JavaScript 代码？

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?

Answer 1

First, pick your favorite Javascript based Pretty Print/Beautifier. I prefer the one athttp://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.

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:

 $ js-beautify 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"

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.

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

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

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"

Answer 9

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.

Answer 10

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, eg ~/dev/javascript/rhino
2. Download beautify.js which is referenced from aforementioned jsbeautifier.org then copy it somewhere, eg ~/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, eg ~/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.