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