【实践】利用 Prettier 格式化打包后的代码？修 BUG 的隐藏神器！
在日常开发中，我们习惯用 Prettier 统一源码风格。但你是否想过——它还能用来“抢救”打包后的压缩代码？当线上出问题、控制台报错指向一行上万字符的 app.xxx.js 时，Prettier 可能就是你快速定位 Bug 的“救命稻草”！
本文将手把手教你如何使用 Prettier 对当前项目目录下的所有支持文件进行原地格式化（in-place formatting），并深入讲解其作用、配置方式、注意事项及工程化集成建议。
一、Prettier 是什么？有什么用？
✅ 什么是 Prettier？
Prettier 是一个有主见的代码格式化工具（opinionated code formatter），支持 JavaScript、TypeScript、CSS、SCSS、HTML、Vue、React、JSON、Markdown 等数十种语言。它的核心理念是：
“你不用争论代码风格，我来替你决定。”
它通过解析代码生成 AST（抽象语法树），再按统一规则重新输出，彻底消除人为格式差异。
✅ 为什么需要它？
- 统一团队代码风格：避免因个人习惯导致的 PR 争论（比如单引号 vs 双引号）。
- 提升代码可读性：自动换行、对齐、缩进，让代码结构更清晰。
- 减少低级错误：例如忘记分号、多余逗号等。
- 节省时间：不再手动调整格式，专注业务逻辑。
二、如何用 Prettier 格式化“原目录”下的所有文件？
所谓“原目录格式化”，指的是直接修改当前项目目录（包括子目录）中的源文件，而不是输出到控制台或新文件。这是日常开发中最常用的场景。
🔧 步骤 1：安装 Prettier
推荐在项目中本地安装（而非全局），以确保团队成员使用相同版本：
npminstall--save-dev prettier💡 如果你尚未初始化 npm 项目，先运行
npm init -y。
🔧 步骤 2：执行格式化命令
在项目根目录下运行：
npx prettier --write.命令解析：
npx：调用本地 node_modules 中的 Prettier。--write：关键参数！表示直接覆盖原文件（即“原地修改”）。.：表示当前目录及其所有子目录。
✅ 执行后，Prettier 会自动遍历所有它支持的文件类型（如.js,.ts,.vue,.css,.json等），并按规则格式化。
三、进阶用法：精确控制格式化范围
🎯 场景 1：只格式化特定类型文件
# 仅格式化 JS/TS/JSX/TSX 文件npx prettier --write"**/*.{js,ts,jsx,tsx}"🚫 场景 2：忽略某些目录或文件
方法一：使用.prettierignore文件（推荐）
在项目根目录创建.prettierignore，内容如下：
# .prettierignore node_modules/ dist/ build/ coverage/ *.min.js .env类似
.gitignore，Prettier 会自动跳过这些路径。
方法二：配合.gitignore
如果你希望 Prettier 忽略 Git 已忽略的文件，可加--ignore-path参数：
npx prettier --write.--ignore-path .gitignore四、配置 Prettier：自定义格式规则
虽然 Prettier “有主见”，但它也允许你通过配置文件微调行为。
创建配置文件（任选一种格式）：
方式 1：.prettierrc（JSON 格式，最常用）
{"semi":true,"singleQuote":true,"tabWidth":2,"trailingComma":"es5","printWidth":80,"bracketSpacing":true,"arrowParens":"avoid"}常用配置项说明：
| 配置项 | 作用 | 默认值 |
|---|---|---|
semi | 是否在语句末尾加分号 | true |
singleQuote | 使用单引号代替双引号 | false |
tabWidth | 缩进空格数 | 2 |
trailingComma | 对象/数组末尾是否加逗号 | "es5" |
printWidth | 单行最大字符数（超长自动换行） | 80 |
完整配置参考：Prettier 官方文档 - Options
五、⚠️ 重要注意事项
--write会直接修改文件！- 建议在执行前提交 Git或确认已备份。
- 可先用
--check模式预览哪些文件会被修改：npx prettier --check.
不要格式化非源码文件
- 如
node_modules、编译产物（dist/）、配置文件（.env）等，务必通过.prettierignore排除。
- 如
与 ESLint 冲突？
- Prettier 负责格式（空格、换行），ESLint 负责代码质量（未使用变量、潜在 bug）。
- 推荐使用
eslint-config-prettier关闭 ESLint 中与 Prettier 冲突的规则。
六、工程化集成建议
✅ 集成到 VS Code
- 安装插件：Prettier - Code formatter
- 设置保存时自动格式化：
// settings.json{"editor.formatOnSave":true,"editor.defaultFormatter":"esbenp.prettier-vscode"}
✅ 集成到 Git Hooks（提交前自动格式化）
使用 Husky + lint-staged：
npminstall--save-dev husky lint-staged npx huskyinstallnpx huskyadd.husky/pre-commit"npx lint-staged"在package.json中添加：
{"lint-staged":{"*.{js,ts,jsx,tsx,vue,css,scss,json,md}":"prettier --write"}}这样，每次git commit时，只会格式化本次提交的文件，高效又安全！
七、总结
| 问题 | 解决方案 |
|---|---|
| 如何格式化整个项目？ | npx prettier --write . |
| 如何避免格式化无关文件？ | 配置.prettierignore |
| 如何自定义格式规则？ | 创建.prettierrc |
| 如何防止误改代码？ | 先git commit，或用--check预览 |
| 如何自动化？ | VS Code 保存格式化 + Git hooks |
Prettier 不仅是一个工具，更是一种工程规范。花 5 分钟配置好它，未来能为你和团队节省数百小时的代码审查与格式争论时间。
附：官方资源
- 官网：https://prettier.io
- GitHub：https://github.com/prettier/prettier
- Playground（在线体验）：https://prettier.io/playground/
欢迎点赞、收藏、评论交流！