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

Question

我正在编写一个批处理脚本，以便美化JavaScript代码。它需要在Windows和Linux上运行。

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

- grom

---

我的Pretty Diff工具完全使用JavaScript编写，因此在所有操作系统上都能很好地运行。它支持美化和缩小JavaScript、CSS以及任何使用XML样式分隔符的标记语言，包括HTML。http://prettydiff.com/?m=beautify - austin cheney

Answer 1

首先，选择你喜欢的基于Javascript的代码美化工具。我比较喜欢http://jsbeautifier.org/的这个，因为这是我最早找到的。下载它的文件https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js。

其次，下载并安装Mozilla团队的基于Java的Javascript引擎Rhino。 "安装"这个词有点误导人；下载zip文件，解压缩所有文件，将js.jar放置在Java类路径中（或在OS X上的Library/Java/Extensions中）。然后你可以使用类似于以下调用来运行脚本：

java -cp js.jar org.mozilla.javascript.tools.shell.Main name-of-script.js

使用第一步中的漂亮打印/美化器编写一个小型Shell脚本，它将读取您的JavaScript文件，并通过第一步中的漂亮打印/美化器运行它。例如：

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

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

Rhino提供了一些额外的有用函数，这些函数在浏览器环境中可能没有意义，但在控制台环境中却很有用。函数print可以打印出字符串，而函数readFile接受文件路径字符串作为参数并返回该文件的内容。

您可以像下面这样调用上述函数：

java -cp js.jar org.mozilla.javascript.tools.shell.Main beautify.js file-to-pp.js

你可以在Rhino运行脚本中混合使用Java和Javascript，因此如果你懂一点Java，将文本流与之配合应该不会太难。

- Alan Storm

---

你给出的链接已经失效了，我认为应该是这个链接： http://jsbeautifier.org/ - Sinan

我是如何做到的： :$ sudo apt-get install libv8-dev libv8-2.2.18 :$ cd einars-js-beautify-f90ce72/v8 :~$ g++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread它就这样工作了。感谢 Einar Lielmanis 和所有参与其中的人！ - Беров

这似乎是一个不断变化的目标。现在jsbeautifier网站上的信息说它是用Python编写的。 - seth

针对使用命令行的用户更新，以下存储库具有易于安装的独立命令行工具，可用于美化js：https://github.com/einars/js-beautify.git - drhodes

你可以很容易地在node中运行此程序，而无需使用Java。有一个名为js-beautify的npm包。安装后，您可以运行命令js-beautify并将要处理的文件作为参数传递。详情请参见：https://www.npmjs.com/package/js-beautify - brafdlog

Answer 2

2014年4月更新：

自从我在2010年回答这个问题以来，这个代码美化器已经重写。现在有一个Python模块，一个用于nodejs的npm包，而jar文件已经被取消了。请阅读github.com上的项目页面。

Python代码示例：

 $ pip install jsbeautifier

NPM 样式：

 $ npm -g install js-beautify

使用它（这将在终端上返回美化后的js文件，主文件保持不变）：

 $ js-beautify file.js

要让更改在文件中生效，您应该使用此命令：

$ js-beautify -r file.js

原始回答

补充@Alan Storm的回答

基于http://jsbeautifier.org/的命令行美化器现在更容易使用，因为它现在（另外）基于V8 JavaScript引擎（C++代码）而不是Rhino（基于Java的JS引擎，打包为“js.jar”）。 因此，您可以使用V8而不是Rhino。

如何使用：

从http://github.com/einars/js-beautify/zipball/master下载jsbeautifier.org zip文件

（这是一个链接到zip文件的下载URL，例如http://download.github.com/einars-js-beautify-10384df.zip）

旧版（不再起作用，jar文件已消失）

  java -jar js.jar  name-of-script.js

新的（替代方案）

从svn安装/编译v8库，请参见上述zip文件中的v8/README.txt

  ./jsbeautify somefile.js

-与Rhino版本略有不同的命令行选项，

-当作为“外部工具”配置到Eclipse中时，表现非常出色。

- knb

---

如果你更喜欢Python而不是V8，现在也有一个Python模块在其中。 - keturn

这个 npm 包的名称叫做 js-beautify。 - brafdlog

我从美化工具中得到了语法错误，但下面的uglifyjs没有。 - Att Righ

Answer 3

如果您正在使用nodejs，则可以尝试uglify-js。在Linux或Mac上，假设您已经安装了nodejs，您可以通过以下方式安装uglify：

sudo npm install -g uglify-js

然后获取选项： uglifyjs -h

因此，如果我有一个名为foo.js的源文件，它看起来像这样：

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

我可以这样美化它：

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

`uglify` 默认使用空格缩进，如果我想将 4 个空格缩进转换为制表符，可以通过 Ubuntu 12.04 自带的 `unexpand` 运行：

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

或者你可以一步到位：

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

你可以在 这里 找到有关 `unexpand` 的更多信息。

所以最终我得到了一个看起来像这样的文件：

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

更新 2016-06-07

看起来uglify-js的维护者现在正在开发版本2，但安装方式仍然相同。

- erapert

---

这是一段命令行JavaScript代码美化器的正确答案。 - Alex Bitek

uglifyjs -b 做的不仅仅是修复缩进，它会重新排列和重写代码，也许是为了提高效率。这不是我想要的。我使用的是旧版本，在 Ubuntu 14.04 中。 - Sam Watkins

请问您能否详细解释一下 uglifyjs -b 是如何重新排列和重写代码的呢？ - erapert

Answer 4

在 Ubuntu LTS 上

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

对于现场美化，使用以下任何命令：

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

- Serge Stroobandt

---

目前最佳答案。要进行原地美化，请使用 js-beautify -o file.js file.js。 - Petr Javorik

使用 -r, --replace 选项将输出写入源文件并替换原内容。命令为 js-beautify -r file.js。 - nkalra0123

Answer 5

你有几个一行选择。使用npm或与npx独立使用。 Semistandar

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

{{链接1：标准}}

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

整洁化工具

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

- Alex Nolasco

---

请注意，列出的命令将覆盖原始文件。首先备份或在版本控制文件夹中工作，以便在需要时轻松返回。 - Johan Bergens

Answer 6

在控制台中，您可以使用艺术风格(也称为AStyle)，其模式为--mode=java。

它的表现很出色，而且它是免费、开源和跨平台的（Linux、Mac OS X、Windows）。

- tmaric

Answer 7

由于无法在已接受的答案中添加评论，因此您看到了一篇本应不存在的帖子。

基本上，在Java代码中我也需要一个JavaScript美化程序，但令我惊讶的是据我所知没有可用的。所以我完全基于接受的答案编写了一个自己的程序（它包装了jsbeautifier.org美化器.js脚本，但可从Java或命令行调用）。

代码位于https://github.com/belgampaul/JsBeautifier

我使用了Rhino和beautifier.js

控制台用法：java -jar jsbeautifier.jar script indentation

示例：java -jar jsbeautifier.jar "function ff() {return;}" 2

Java代码用法： public static String jsBeautify(String jsCode, int indentSize)

欢迎您扩展代码。在我的情况下，我只需要缩进，以便在开发时检查生成的javascript。

希望这能为您节省一些项目时间。

- ioikka

Answer 8

使用现代的JavaScript方式：

使用Grunt与Grunt的jsbeautifier插件相结合

您可以使用npm轻松地将所有内容安装到开发环境中。

您所需要做的就是设置一个包含适当任务的Gruntfile.js文件，这些任务还可以涉及文件串联、lint、uglify、minify等，并运行grunt命令。

- Tchakabam

Answer 9

我写了一篇文章，解释如何在不到5分钟的时间内构建一个用JavaScript实现的JavaScript命令行美化程序。你的经验可能会有所不同。

1. 下载最新稳定版的Rhino并将其解压到某个位置，例如~/dev/javascript/rhino。 2. 下载beautify.js，该文件可以从上述jsbeautifier.org引用，然后将其复制到某个位置，例如~/dev/javascript/bin/cli-beautifier.js。 3. 在beautify.js的末尾添加以下内容（使用一些额外的顶级JavaScript属性）：

//对作为第一个参数传递的文件运行美化程序。
print(j23s_beautify(readFile(arguments[0])));

4. 将以下代码复制粘贴到可执行文件中，例如~/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. （可选）将包含jsbeautifier.js的文件夹添加到PATH或移动到已经存在的某个文件夹中。

- Shonzilla

Answer 10

我相信当您询问命令行工具时，您只是想批量美化所有js文件。在这种情况下，Intellij IDEA（已测试11.5）可以实现此目的。您只需要选择任何项目文件，然后在主IDE菜单中选择“代码” -> “重新格式化代码..”。然后在对话框中选择“目录中的所有文件...”并按“enter”键。只需确保为JVM分配了足够的内存即可。

- humkins