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


101

我正在编写批处理脚本,以美化JavaScript代码。它需要同时在WindowsLinux上运行

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


我的Pretty Diff工具完全用JavaScript编写,因此在所有操作系统上均能很好地工作。它支持JavaScript,CSS,使用XML样式定界符的任何标记语言(包括HTML)的美化和缩小。prettydiff.com/?m=美化

Answers:


64

首先,选择您最喜欢的基于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,也可以通过文本流使其运行起来并不难。


3
您提供的链接已断开,我认为应该是这个链接,jsbeautifier.org
Sinan

2
我是怎么做到的::〜$ 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和所有参与人员!
2011年

1
这些似乎是一个移动的目标。现在jsbeautifier网站上的信息说它是用python编写的。
赛斯,2011年

对于cmdline用户进行更新,以下回购可以轻松安装用于漂亮打印js的独立命令行工具:github.com/einars/js-beautify.git
drhodes 2012年

用现代的JS方法使用步兵:stackoverflow.com/questions/18985/...
Tchakabam

33

2014年4月更新

自从我在2010年回答这个问题以来,美化工具已被重写。现在那里有一个python模块,一个用于nodejs的npm包,而jar文件不见了。请阅读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代替犀牛。

如何使用:

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中效果很好


3
或者,如果您更喜欢python而不是v8,则现在还有一个python模块。
keturn 2011年

1
npm软件包称为js-beautify
brafdlog 2015年

30

如果您使用的是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

您可以在此处找到有关展开的更多信息

所以毕竟,我得到的文件看起来像这样:

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

更新2016-06-07

尽管安装方法相同,但uglify-js的维护者似乎正在使用版本2


4
这是命令行JavaScript代码美化的正确答案。
bitek '16

uglifyjs -b不仅可以解决缩进,还可以重新排列并重新编写代码,也许是为了提高效率。那不是我想要的 我在Ubuntu 14.04中使用的是旧版本。
山姆·沃特金斯

您能否再解释一下如何uglifyjs -b重新安排和重写代码?
erapert

11

在Ubuntu LTS上

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

1
目前最好的答案。对于就地美化用途js-beautify -o file.js file.js
Petr Javorik,

3

在控制台中,您可以将Artistic Style(aka AStyle)与结合使用--mode=java
它运行良好,并且是免费的,开放源代码和跨平台的(Linux,Mac OS X,Windows)。


2

使用现代的JavaScript方法:

Gruntjsbeautifier插件结合使用可用于Grunt

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

您所需要做的就是设置一个带有适当任务的Gruntfile.js,其中还可能涉及文件串联,lint,uglify,minify等,然后运行grunt命令。


2

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

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

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

我使用了rhino和beautifier.js

从控制台使用:java -jar jsbeautifier.jar脚本缩进

示例:java -jar jsbeautifier.jar“函数ff(){return;}” 2

来自Java代码的用法:公共静态字符串jsBeautify(String jsCode,int indentSize)

欢迎您扩展代码。就我而言,我只需要缩进即可,以便在开发时可以检查生成的javascript。

希望可以为您节省一些时间。


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或移动到已有的文件夹。


1

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

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

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.