nodejs 下使用 Prettier 美化单个 JS 文件(完整教程)
一、使用场景说明
很多前端打包后的文件类似:
7165.89f0dbce.js特点:
- 文件名带 hash
- 已压缩 / 混淆
- 不适合直接阅读
目标:
在不修改原文件的情况下,美化 JS,并生成一个可读的新文件
pretty.js
二、环境准备(一次即可)
1️⃣ 安装 Node.js 和 npm
sudoaptupdatesudoaptinstallnodejsnpm-y验证:
node -vnpm-v能看到版本号即可。
三、安装 Prettier(全局)
正确方式:
sudonpminstall-g prettier验证是否成功:
prettier -v输出版本号说明安装完成。
四、美化单个 JS 文件(核心步骤)
原始文件
7165.89f0dbce.js执行美化并生成新文件
prettier\--stdin-filepath7165.89f0dbce.js\7165.89f0dbce.js\>pretty.js结果说明
| 文件 | 说明 |
|---|---|
7165.89f0dbce.js | 原文件(完全不动) |
pretty.js | 美化后的可读版本 |
✅ 推荐用于学习 / 代码分析 / 排错
五、为什么要用--stdin-filepath?(重点)
如果直接这样:
prettier7165.89f0dbce.js>pretty.js可能会出现:
- 格式规则不生效
- 箭头函数 / 模块识别异常
正确原因
--stdin-filepath用来告诉 Prettier:
“这是一个JS 文件,请按 JS 规则解析”
✔️强烈推荐用于压缩 JS
六、提升可读性的常用参数(可选)
宽一点,少换行
prettier\--stdin-filepath7165.89f0dbce.js\--print-width120\7165.89f0dbce.js\>pretty.js两个空格缩进
prettier\--stdin-filepath7165.89f0dbce.js\--tab-width2\7165.89f0dbce.js\>pretty.js七、一键脚本(推荐)
新建脚本
nanobeautify-js.sh内容
#!/bin/bashINPUT="7165.89f0dbce.js"OUTPUT="pretty.js"prettier\--stdin-filepath"$INPUT"\--print-width120\"$INPUT"\>"$OUTPUT"echo"✔ 已生成美化文件:$OUTPUT"赋予执行权限
chmod+x beautify-js.sh使用
./beautify-js.sh八、如果 Prettier 美化效果不理想(备用)
针对极度混淆代码:
sudonpminstall-g js-beautify js-beautify7165.89f0dbce.js -o pretty.js九、常见问题排查
❌ apt 安装失败
sudoaptinstallprettier原因:
Prettier 是 Node 工具,不在 apt 仓库
✔️ 正解:npm install -g prettier
❌ 命令没反应
- 确认
prettier -v - 确认当前目录有 JS 文件
十、总结(推荐做法)
✅安全美化(不破坏原文件)
prettier --stdin-filepath7165.89f0dbce.js7165.89f0dbce.js>pretty.js✅适合:
- 打包文件分析
- 源码学习
- 线上问题排查