nodejs 下使用 Prettier 美化单个 JS 文件(完整教程)

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

适合:

  • 打包文件分析
  • 源码学习
  • 线上问题排查
相关推荐
醇氧3 小时前
【Windows】从守护到终结:解析一个 Java 服务的优雅停止脚本
java·开发语言·windows
reasonsummer3 小时前
【办公类-18-07】20251215(Python)“口腔检查涂氟信息”批量生成打印(区名、学号、姓名、学校、班级、身份证、户籍、性别、民族)
开发语言·python
小鹿学程序3 小时前
FileZilla连接到虚拟机
java·服务器·开发语言
未来魔导3 小时前
Gin版本的路由总结
开发语言·llm·gin·路由
周杰伦_Jay3 小时前
【Eino框架】Go语言驱动的LLM应用开发新范式
开发语言·后端·golang
hxmmm3 小时前
自定义封装 vue多页项目新增项目脚手架
前端·javascript·node.js
ETA83 小时前
JS执行机制揭秘:你以为的“顺序执行”,其实是V8引擎在背后搞事情!
前端·javascript
上78将3 小时前
Java中既有编译执行又有解释执行,这个怎么理解?
java·开发语言
鹏北海-RemHusband3 小时前
微前端实现方式:HTML Entry 与 JS Entry 的区别
前端·javascript·html