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

Question

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

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

Answer 1

我无法向已接受的答案添加评论，因此这就是为什么您看到的帖子本来就不应该存在。

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

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

我使用了 rhino 和 beautifier.js

控制台的用法： java -jar jsbeautifier.jar 脚本缩进

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

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

欢迎您扩展代码。 就我而言，我只需要缩进，这样我就可以在开发时检查生成的 JavaScript。

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

Answer 2

首先，选择您最喜欢的基于 Javascript 的漂亮打印/美化器。 我更喜欢 http 上的那个://jsbeautifier.org/，因为这是我首先发现的。 下载其文件 https://github.com/ beautify-web/js-beautify/blob/master/js/lib/beautify.js

其次，下载并安装 Mozilla 集团基于 Java 的 Javascript 引擎，犀牛。 “安装”有点误导； 下载 zip 文件，解压所有内容，将 js.jar 放入 Java 类路径（或 OS X 上的 Library/Java/Extensions）。 然后，您可以使用类似于此的调用来运行脚本。

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

使用步骤 1 中的 Pretty Print/Beautifier 编写一个小型 shell 脚本，该脚本将读取您的 javascript 文件，并通过步骤 1 中的 Pretty Print/Beautifier 运行它。 例如，

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

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

Rhino 为 javascript 提供了一些额外有用的功能，这些功能在浏览器上下文中不一定有意义，但在控制台上下文中却有意义。 函数 print 执行您所期望的操作，并打印出一个字符串。 函数 readFile 接受文件路径字符串作为参数并返回该文件的内容。

您可以调用上面的内容，例如

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

您可以在 Rhino 运行脚本中混合并匹配 Java 和 Javascript，因此，如果您了解一点 Java，那么使用文本流运行它应该不会太难。

Answer 3

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。

如何使用：

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

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

旧的（不再工作，jar 文件消失了）

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

新的（替代）

从 svn 安装/编译 v8 lib，请参阅上面的 v8/README.txt -提到的 zip 文件

  ./jsbeautify somefile.js

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

- 当配置为“外部工具”时，在 Eclipse 中工作得很好

Answer 4

如果您使用的是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 | 取消展开--tabs=4> 最可爱的foo.js

了解有关 unexpand 的更多信息

您可以此处 毕竟，我最终得到一个如下所示的文件：

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

update 2016-06-07

看来 uglify-js 的维护者现在正在开发 版本 2 尽管安装是相同的。

Answer 5

在 Ubuntu LTS 上，

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

要进行就地美化，可以使用以下任意命令：

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

Answer 6

您有几种单班轮选择。 与 npm 一起使用或独立与 npx 一起使用。

半标准

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

标准< /a>

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

更漂亮

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

Answer 7

在控制台中，您可以将 艺术风格（又名 AStyle）与 --mode=java.
它运行良好，并且免费、开源且跨平台（Linux、Mac OS X、Windows）。

Answer 8

使用现代 JavaScript 方式：

将 Grunt 与 Grunt 的 jsbeautifier 插件

您可以使用 npm。

您所需要的只是设置一个包含适当任务的 Gruntfile.js，其中还可能涉及文件串联、lint、uglify、minify 等，然后运行 ​​grunt 命令。

Answer 9

我相信当您询问命令行工具时，您只是想批量美化所有 js 文件。

在这种情况下，Intellij IDEA（使用 11.5 进行测试）可以做到这一点。

您只需选择任何项目文件，然后在主 IDE 菜单中选择“代码”->“重新格式化代码..”。 然后在对话框中选择“目录中的所有文件...”并按“Enter”。
只要确保为 JVM 分配了足够的内存即可。

Answer 10

我写了一篇文章解释如何构建 实现的命令行 JavaScript 美化器在 JavaScript 中，不到 5 分钟即可完成。 YMMV。

1. 下载最新的稳定版 Rhino 并将其解压到某个位置，例如 ~/dev/javascript/rhino
2. 下载从前面提到的 jsbeautifier.org 引用的 beautify.js，然后将其复制到某个地方，例如 ~/dev/javascript/bin/cli-beautifier.js

3. 将其添加到 beautify.js 的末尾（使用 JavaScript 的一些附加顶级属性）：

   // 对作为第一个参数传递的文件运行美化器。 
     打印（j23s_beautify（readFile（参数[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 或移动到已有的文件夹。