How to Beautify JavaScript Code Using Command Line

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.

What's a good command line JavaScript code beautifier?

There's a tool written in perl that can do it: JavaScript::Beautifier

I would give GNU indent a go. It has a lot of options and if you use the right ones you might be able to get exactly what you want.

Is there an easy way to restructure javascript code with the command line?

As stated in the comments, the process of removing white spaces and new lines in javascript is called "minification". For doing the reverse process we need to look for tools that "unminify" the code. On the command line, we can do it installing jsbeautifier with pip:

pip install jsbeautifier

And we can use it like this:

js-beautify myMinifiedFile.js > myNewUnminifiedFile.js

Alternatively, there're online tools like unminify.com where we can just paste the code and it'll do the reverse process.

PS: Minification is not generally a reversible operation, as information could be lost in the process. So, tools like these are used only to beautify the code.

Command line formatter for PHP and Javascript

PHP_ Beautifier is very outdated! For a more modern approach try php-cs-fixer

Example command:
php-cs-fixer fix --rules=@PSR2 path/to/php/src

A second alternative is PHP_CodeSniffer

Example command: phpcbf --standard=PSR2 path/to/php/src

How can I use JSBeautify from the command line?

Check out this post on using JSBeautify with Textmate. It has some good instructions on how to install it on your system. On Mac OS X, I used:

cd /tmp
git clone https://github.com/einars/js-beautify.git
cd js-beautify/python
python setup.py install

Then you can simply use js-beautify /path/to/filename.js to have it run.

How do I JS-Beautify recursively?

However, JS-beautify does work ... in case of all the files in a directory but not in sub-directory

You've mentioned that JS-beautify works if all the input files are in the same directory. Your command doesn't probably work because you pass all the results from find which might include input files from different directories.

As mentioned in the comment earlier, you could use -exec instead:

find . -type f -name "*.html" -exec js-beautify -r {} \;

Newer versions of GNU find might use this syntax:

find . -type f -name "*.html" -exec js-beautify -r {} +

How to beautify/prettify a Json/JS file in a node.js script

you can use the tool esformatter.

edit by @jck: here is JS snippet that works using fs:

var esformatter = require('esformatter');
var fs = require('fs');
var filename = "./myFile.json";
var codeStr = fs.readFileSync(filename).toString();
var formattedCode = esformatter.format(codeStr);
fs.writeFile(filename, formattedCode);

Can I beautify javascript with uglifyjs via API?

From the docs here (https://github.com/mishoo/UglifyJS2#minify-options) it looks like that needs to be in the Output Options

var options = { 
compress: false,
mangle: false,
output: {
beautify: true
}
};
var code = uglifyjs(source, options);


Related Topics



Leave a reply



Submit