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

问题描述 投票:90回答:9

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

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

javascript command-line-interface pretty-print multiplatform
9个回答
62
投票

首先,选择你最喜欢的基于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文件中读取并通过第一步中的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,那么运行text-stream也不会太难。


28
投票

如果你正在使用nodejs,那么试试uglify-js

在Ubuntu 12.04上,假设您已经安装了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空格缩进转换为制表符,我可以通过unexpand运行它,Ubuntu 12.04附带:

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

或者你可以一气呵成:

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

你可以找到更多关于unexpand here的信息

所以在这之后我最终得到一个看起来像这样的文件:

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

更新2016-06-07

看来uglify-js的维护者现在正在研究version 2,虽然安装是一样的。


23
投票

更新2014年4月:

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

Python风格:

 $ pip install jsbeautifier

NPM风格:

 $ npm -g install js-beautify

使用它:

 $ js-beautify 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

新的(替代)

安装/编译v8 lib FROM svn,参见上述zip文件中的v8 / README.txt

  ./jsbeautify somefile.js

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

- 配置为“外部工具”时,在Eclipse中运行良好


5
投票

On Ubuntu 18.04 LTS

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

2
投票

在控制台中,您可以将Artistic Style(a.k.a。AStyle)与--mode=java一起使用。 它运行良好,它是免费的,开源的和跨平台的(Linux,Mac OS X,Windows)。


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。

希望它能为你节省一些时间。


1
投票

我写了一篇文章解释如何在5分钟内建立一个command-line JavaScript beautifier implemented in JavaScript。因人而异。

  1. 下载最新的稳定Rhino并将其解压缩到某个地方,例如〜的/ dev / JavaScript的/犀牛
  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或移动到已存在的某个文件夹。

1
投票

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

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

您只需选择任何项目文件,然后在主IDE菜单中选择“代码” - >“重新格式化代码..”。然后在对话框中选择“目录中的所有文件...”并按“输入”。只需确保为JVM提供足够的内存。


1
投票

使用现代JavaScript方式:

Gruntjsbeautifier plugin for Grunt结合使用

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

您需要的只是设置一个具有相应任务的Gruntfile.js,它还可以包含文件串联,lint,uglify,minify等,并运行grunt命令。

© www.soinside.com 2019 - 2024. All rights reserved.