Stack Exchange is using an old version of js-beautify to beautify JS, HTML, and CSS. Dynamic import isn't the only thing the old version gets wrong. It also breaks code when the code contains any of the following:
Numeric separators (fixed in new version):
1_000_000turns into
1 _000_000Private fields (fixed in new version):
class X { #foo = 'bar'; }turns into
class X {# foo = 'bar'; }Logical assignment (fixed in new version):
a ||= b;turns into
a || = b;Nullish coalescing (fixed in new version):
x ?? yturns into
x ? ? yOptional chaining (fixed in new version):
x?.y?.zturns into
x ? .y ? .z
The new version of js-beautify also supports dynamic import:
const code = `
await import('./module.js'); // GOOD
1_000_000 // GOOD
class X { #foo = 'bar'; } // GOOD
a ||= b; // GOOD
x ?? y // GOOD
x?.y?.z // GOOD
`;
console.log(js_beautify(code));
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.6/beautify.min.js"></script>
Let's update js-beautify.
Answer from CertainPerformance on Stack OverflowVideos
Stack Exchange is using an old version of js-beautify to beautify JS, HTML, and CSS. Dynamic import isn't the only thing the old version gets wrong. It also breaks code when the code contains any of the following:
Numeric separators (fixed in new version):
1_000_000turns into
1 _000_000Private fields (fixed in new version):
class X { #foo = 'bar'; }turns into
class X {# foo = 'bar'; }Logical assignment (fixed in new version):
a ||= b;turns into
a || = b;Nullish coalescing (fixed in new version):
x ?? yturns into
x ? ? yOptional chaining (fixed in new version):
x?.y?.zturns into
x ? .y ? .z
The new version of js-beautify also supports dynamic import:
const code = `
await import('./module.js'); // GOOD
1_000_000 // GOOD
class X { #foo = 'bar'; } // GOOD
a ||= b; // GOOD
x ?? y // GOOD
x?.y?.z // GOOD
`;
console.log(js_beautify(code));
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.6/beautify.min.js"></script>
Let's update js-beautify.
We're now using version 1.15.1 of js-beautify, & have switched to pulling in the npm package (we were doing some very legacy things before) so the path to future upgrades is an easier one than previously.
Please let me know if anything looks amiss.
ยป npm install js-beautify
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"