如何使用命令行美化 JavaScript 代码?
-
09-06-2019 - |
题
我正在编写一个批处理脚本来美化 JavaScript 代码。它需要在两个方面都起作用 视窗 和 Linux.
如何使用命令行工具美化JavaScript代码?
解决方案
首先,选择您最喜欢的基于 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,那么使用文本流运行它应该不会太难。
其他提示
如果您使用的是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
您可以了解有关取消展开的更多信息 这里
所以在这一切之后我最终得到一个如下所示的文件:
function foo(bar, baz) {
console.log("something something");
return true;
}
更新2016-06-07
看来 uglify-js 的维护者现在正在致力于 版本2 虽然安装是一样的。
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代替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,请参阅上述 zip 文件中的 v8/README.txt
./jsbeautify somefile.js
- 命令行选项与 rhino 版本略有不同,
- 当配置为“外部工具”时,在 Eclipse 中工作得很好
在 Ubuntu 18.04 LTS 上
$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js
在控制台中,您可以使用 艺术风格 (又名A风格)与 --mode=java
.
它运行良好,并且免费、开源且跨平台(Linux、Mac OS X、Windows)。
我无法向已接受的答案添加评论,因此这就是为什么您看到的帖子本来就不应该存在。
基本上我还需要一个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(字符串jsCode,int indentSize)
欢迎您扩展代码。就我而言,我只需要缩进,这样我就可以在开发时检查生成的 JavaScript。
希望它能为您的项目节省一些时间。
我写了一篇文章解释如何构建 用 JavaScript 实现的命令行 JavaScript 美化器 不到 5 分钟。YMMV。
- 下载最新的稳定版 Rhino 并将其解压到某个地方,例如〜/ dev / javascript /犀牛
- 下载从前面提到的 jsbeautifier.org 引用的 beautify.js,然后将其复制到某个地方,例如〜/dev/javascript/bin/cli-beautifier.js
将其添加到 beautify.js 的末尾(使用 JavaScript 的一些附加顶级属性):
// Run the beautifier on the file passed as the first argument. print( j23s_beautify( readFile( arguments[0] )));
将以下代码复制粘贴到可执行文件中,例如〜/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 $*
(可选)将包含 jsbeautifier.js 的文件夹添加到 PATH 或移动到已有的某个文件夹。
我相信当您询问命令行工具时,您只是想批量美化所有 js 文件。
在这种情况下,Intellij IDEA(使用 11.5 进行测试)可以做到这一点。
您只需选择任何项目文件,然后在主 IDE 菜单中选择“代码”->“重新格式化代码..”。然后在对话框中选择“目录中的所有文件...”并按“Enter”。只要确保为 JVM 分配了足够的内存即可。
使用现代 JavaScript 方式:
使用 咕噜声 结合 Grunt 的 jsbeautifier 插件
您可以使用以下命令轻松地将所有内容安装到您的开发环境中 新项目管理.
您所需要的只是设置一个包含适当任务的 Gruntfile.js,其中还可能涉及文件串联、lint、uglify、minify 等,然后运行 grunt 命令。