121

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

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

4

10 回答 10

71

首先,选择你最喜欢的基于 Javascript 的 Pretty Print/Beautifier。我更喜欢那个在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

使用第 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 有一点了解,用文本流运行它应该不会太难。

于 2008-08-26T03:22:40.553 回答
54

2014 年 4 月更新

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

蟒蛇风格:

 $ 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 lib,参见上述 zip 文件中的 v8/README.txt

  ./jsbeautify somefile.js

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

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

于 2010-10-28T09:38:19.863 回答
34

如果您使用的是 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 空格缩进转换为制表符,我可以运行unexpandUbuntu 12.04 附带的它:

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,尽管安装是相同的。

于 2013-05-12T23:55:27.933 回答
15

在 Ubuntu LTS 上

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

对于就地美化,任何以下命令:

$ js-beautify -r file.js
$ js-beautify --replace file.js
于 2019-03-26T13:59:00.213 回答
4

在控制台中,您可以将艺术风格(又名 AStyle)与--mode=java.
它运行良好,而且是免费的、开源的和跨平台的(Linux、Mac OS X、Windows)。

于 2014-02-16T14:05:10.113 回答
4

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

半标准

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

标准

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

更漂亮

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
于 2020-08-14T22:05:19.890 回答
2

我无法对已接受的答案添加评论,这就是为什么您会看到一开始就不应该存在的帖子的原因。

基本上我还需要一个java代码中的javascript美化器,令我惊讶的是,据我所知,没有一个可用的。所以我完全根据接受的答案自己编写了一个(它包装了 jsbeautifier.org 美化器 .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。

希望它会在您的项目中为您节省一些时间。

于 2013-01-27T07:31:09.037 回答
2

使用现代 JavaScript 方式:

Grunt与 Grunt 的jsbeautifier 插件结合使用

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

你所需要的只是设置一个带有适当任务的 Gruntfile.js,其中还包括文件连接、lint、uglify、minify 等,然后运行 ​​grunt 命令。

于 2014-09-15T19:49:10.303 回答
1

我写了一篇文章,解释了如何在 5 分钟内构建一个用 JavaScript 实现的命令行 JavaScript 美化器。YMMV。

  1. 下载最新的稳定版 Rhino 并将其解压到某个地方,例如 ~/dev/javascript/rhino
  2. 下载之前提到的 jsbeautifier.org 引用的 beautify.js,然后将其复制到某个地方,例如 ~/dev/javascript/bin/cli-beautifier.js
  3. 在 beautify.js 的末尾添加这个(对 JavaScript 使用一些额外的顶级属性):

    // Run the beautifier on the file passed as the first argument.
    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 或移动到已经存在的某个文件夹。

于 2010-10-31T22:08:32.320 回答
1

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

在这种情况下,Intellij IDEA(用 11.5 测试)可以做到这一点。

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

于 2013-08-20T19:20:10.817 回答