如何使用命令行美化 JavaScript 代码?
Posted
技术标签:
【中文标题】如何使用命令行美化 JavaScript 代码?【英文标题】:How can I beautify JavaScript code using Command Line? 【发布时间】:2010-09-06 08:20:31 【问题描述】:我正在编写一个批处理脚本来美化 javascript 代码。它需要在 Windows 和 Linux 上运行。
如何使用命令行工具美化 JavaScript 代码?
【问题讨论】:
我的 Pretty Diff 工具完全用 JavaScript 编写,因此它在所有操作系统上都同样适用。它支持 JavaScript、CSS、任何使用 XML 样式分隔符的标记语言(包括 html)的美化和缩小。 prettydiff.com/?m=beautify 【参考方案1】:2014 年 4 月更新:
自从我在 2010 年回答这个问题以来,美化器已经被重写。现在里面有一个 python 模块,一个用于 nodejs 的 npm 包,jar 文件已经消失了。请阅读project page on 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,参见上述 zip 文件中的 v8/README.txt
./jsbeautify somefile.js
- 命令行选项与 rhino 版本略有不同,
-当配置为“外部工具”时,在 Eclipse 中效果很好
【讨论】:
或者,如果您更喜欢 python 而不是 v8,那么现在也里面有一个 python 模块。 npm包名为js-beautify【参考方案2】:在 Ubuntu LTS 上
$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js
就地美化,以下任一命令:
$ js-beautify -r file.js
$ js-beautify --replace file.js
【讨论】:
目前最好的答案。对于就地美化使用js-beautify -o file.js file.js
使用 -r, --replace 就地写入输出,替换输入 js-beautify -r file.js【参考方案3】:
您有几个单一的班轮选择。与 npm 一起使用或与 npx 独立使用。
Semistandar
npx semistandard "js/**/*.js" --fix
Standard
npx standard "js/**/*.js" --fix
Prettier
npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
【讨论】:
请注意,列出的命令会覆盖原始文件。首先进行备份或在版本控制的文件夹中工作,以便在需要时轻松返回。【参考方案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 | unexpand --tabs=4 > cutestfoo.js
您可以了解更多关于 unexpand here
所以我最终得到了一个看起来像这样的文件:
function foo(bar, baz)
console.log("something something");
return true;
2016-06-07 更新
uglify-js 的维护者似乎正在开发version 2,虽然安装是一样的。
【讨论】:
这是命令行 JavaScript 代码美化器的正确答案。uglifyjs -b
不仅仅是修复缩进,它重新排列和重写代码,也许是为了提高效率。那不是我想要的。我在 Ubuntu 14.04 中使用的是旧版本。
你能解释一下uglifyjs -b
如何重新排列和重写代码吗?【参考方案5】:
首先,选择您最喜欢的基于 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 有一点了解,用 text-streams 运行它应该不会太难。
【讨论】:
你给的链接坏了,我想应该是这个,jsbeautifier.org 我是怎么做到的::~$ 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 和所有相关人员! 这些似乎是一个移动的目标。现在 jsbeautifier 网站上的信息说它是用 python 编写的。 为 cmdline 用户更新,以下 repo 易于安装独立的命令行工具,用于漂亮的打印 js:github.com/einars/js-beautify.git 你可以很容易地运行它,而无需从 node.java 运行它。有一个名为 js-beautify 的 npm 包。安装后,您可以运行命令 js-beautify 传递您想要的文件作为参数。详情见:npmjs.com/package/js-beautify【参考方案6】:我无法对已接受的答案添加评论,这就是为什么您会看到一开始就不应该存在的帖子。
基本上,我还需要一个 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。
希望它能在您的项目中节省一些时间。
【讨论】:
【参考方案7】:在控制台中,您可以将Artistic Style(又名AStyle)与--mode=java
一起使用。
它运行良好,而且免费、开源且跨平台(Linux、Mac OS X、Windows)。
【讨论】:
【参考方案8】:使用现代 JavaScript 方式:
将Grunt 与jsbeautifier plugin for Grunt 结合使用
您可以使用 npm 轻松将所有内容安装到您的开发环境中。
您只需要设置一个带有适当任务的 Gruntfile.js,其中还包括文件连接、lint、uglify、缩小等,然后运行 grunt 命令。
【讨论】:
【参考方案9】:我相信当您询问命令行工具时,您只是想批量美化所有 js 文件。
在这种情况下,Intellij IDEA(用 11.5 测试)可以做到这一点。
您只需要选择任何项目文件,然后在 IDE 主菜单中选择“代码”->“重新格式化代码..”。然后在对话框中选择“目录中的所有文件...”并按“回车”。 只需确保为 JVM 分配了足够的内存即可。
【讨论】:
【参考方案10】:我写了一篇文章,解释如何在 5 分钟内构建 command-line JavaScript beautifier implemented in JavaScript。 YMMV。
下载最新的稳定版 Rhino 并将其解压到某个地方,例如~/dev/javascript/rhino 下载前面提到的 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 或移动到已经存在的某个文件夹。
【讨论】:
以上是关于如何使用命令行美化 JavaScript 代码?的主要内容,如果未能解决你的问题,请参考以下文章
学妹问我的终端为什么这么好看———windows命令行美化指南(从cmd到oh-my-posh)