当前位置: 首页 > news >正文

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

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

结果说明

文件说明
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

适合:

  • 打包文件分析
  • 源码学习
  • 线上问题排查
http://www.cnnetsun.cn/news/74161.html

相关文章:

  • 揭秘R-Python变量传递难题:5种高效解决方案让你少走3年弯路
  • OpenCore Legacy Patcher:让旧款Mac重获新生的终极指南
  • FP8量化技术详解:为何Stable Diffusion 3.5更轻更快?
  • 使用Wan2.2-T2V-5B生成广告短视频模板的完整工作流
  • 揭秘医疗数据导出难题:PHP如何实现安全合规的CSV与JSON转换
  • 【GraphQL的PHP错误处理】:掌握5种高效异常捕获策略,提升API健壮性
  • 独家披露:顶级金融机构都在用的R语言Copula风险建模内部笔记(限时公开)
  • ImageToSTL:零基础将图片秒变3D打印模型的神器
  • 口语教育的黄金时代:AI技术引领教育创新与创业机遇
  • 基于多模态大模型的工业质检系统:从AOI到“零样本“缺陷识别的产线实践
  • 微信视频号直播弹幕抓取终极指南:实时获取互动数据的完整方案
  • Source Han Serif 思源宋体:开源专业字体全方位应用指南
  • 医疗数据交换新标准来了,PHP如何快速支持FHIR格式导出?
  • 移动端PDF预览困境:如何用pdfh5.js打造丝滑体验
  • 5分钟搞定Windows虚拟显示器:零基础也能轻松上手
  • (Rust赋能PHP):构建高效内存管理系统的4种方法
  • 【R语言聚类算法进阶指南】:解锁空间转录组数据的隐藏细胞类型
  • 如何用AI图像分层工具3倍提升设计效率?终极指南
  • 【PHP高手进阶必备】:深入解读PHP 8.6废弃函数与替代方案(附检测脚本)
  • PyART完全指南:5步掌握气象雷达数据处理核心技能
  • 3分钟掌握在线UML绘图:PlantUML Editor完全使用指南
  • 5分钟快速上手Unitree Go2机器人:ROS2集成终极指南
  • 开源项目维护的3大挑战与5个实用解决方案
  • 夸克网盘自动化配置终极指南:三步搞定懒人追剧神器
  • QQ音乐数据获取技术揭秘:Python工具深度剖析与实战应用
  • Display Driver Uninstaller完整教程:快速解决显卡驱动问题的终极方案
  • 从零构建农业物联网网关,PHP开发者必须掌握的3种主流协议对比
  • OpenCore Legacy Patcher深度解析:老Mac跨代升级的完整技术方案
  • 揭秘空间转录组数据分析:5大R语言聚类算法核心原理与应用
  • 为什么你的田间试验数据总不显著?R语言方差分析常见误区全避坑