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

✅ 适合:

  • 打包文件分析
  • 源码学习
  • 线上问题排查
相关推荐
chenbingjie_c4 小时前
C++ 进阶核心知识点总结:模板、内存分区、new/delete、内存池
开发语言·c++
福兮说5 小时前
前端下载大文件,点了按钮半天没反应:fetch + blob 的三个问题和三种替代写法
前端·javascript·性能优化·文件下载
Escalating_xu5 小时前
【C 语言】深入理解指针(1·下):指针运算、野指针、assert 与传址实战
java·c语言·开发语言
实心儿儿5 小时前
Qt — Qt 事件
开发语言·qt
周杰偷奶茶6 小时前
【Java】数据类型与变量
java·开发语言
code斗6 小时前
Java数据结构:堆详解
java·开发语言·数据结构
重生之小比特6 小时前
【C++进阶】map和set
java·开发语言·c++
lie..6 小时前
30天从零开始学AI应用开发(Day 12):像产品一样稳:流式输出、报错重试、花钱控制
开发语言·人工智能·php
傻啦嘿哟6 小时前
Python的默认参数把我坑惨了,原来写[]和写None的区别这么大
开发语言·python·机器学习
DeepAgent7 小时前
AI Agent 工程实践(49):一次真实优化——从 Agent v1 到 v2
开发语言·人工智能·agent