企业官网建设流程全解析

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

结果说明

✅ 推荐用于学习 / 代码分析 / 排错

五、为什么要用--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

✅适合：

• 打包文件分析
• 源码学习
• 线上问题排查