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

适合:

  • 打包文件分析
  • 源码学习
  • 线上问题排查
相关推荐
程序猿的程6 小时前
开源一个 React 股票 K 线图组件,传个股票代码就能画图
前端·javascript
大雨还洅下7 小时前
前端JS: 虚拟dom是什么? 原理? 优缺点?
javascript
唐叔在学习7 小时前
[前端特效] 左滑显示按钮的实现介绍
前端·javascript
青青家的小灰灰7 小时前
深入理解事件循环:异步编程的基石
前端·javascript·面试
前端Hardy8 小时前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
前端Hardy8 小时前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
UIUV10 小时前
node:child_process spawn 模块学习笔记
javascript·后端·node.js
烛阴11 小时前
Three.js 零基础入门:手把手打造交互式 3D 几何体展示系统
javascript·webgl·three.js
颜酱11 小时前
单调栈:从模板到实战
javascript·后端·算法
_AaronWong13 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js