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

适合:

  • 打包文件分析
  • 源码学习
  • 线上问题排查
相关推荐
执风挽^10 分钟前
Python基础编程题2
开发语言·python·算法·visual studio code
Z9fish20 分钟前
sse哈工大C语言编程练习20
c语言·开发语言·算法
VT.馒头40 分钟前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
萧鼎1 小时前
Python 包管理的“超音速”革命:全面上手 uv 工具链
开发语言·python·uv
css趣多多1 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js
-凌凌漆-1 小时前
【vue】pinia中的值使用 v-model绑定出现[object Object]
javascript·vue.js·ecmascript
Anastasiozzzz1 小时前
Java Lambda 揭秘:从匿名内部类到底层原理的深度解析
java·开发语言
刘琦沛在进步1 小时前
【C / C++】引用和函数重载的介绍
c语言·开发语言·c++
机器视觉的发动机1 小时前
AI算力中心的能耗挑战与未来破局之路
开发语言·人工智能·自动化·视觉检测·机器视觉
HyperAI超神经2 小时前
在线教程|DeepSeek-OCR 2公式/表格解析同步改善,以低视觉token成本实现近4%的性能跃迁
开发语言·人工智能·深度学习·神经网络·机器学习·ocr·创业创新