在日常开发中，我们习惯用 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

推荐在项目中本地安装（而非全局），以确保团队成员使用相同版本：

npm install --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

---

五、⚠️ 重要注意事项

1. --write 会直接修改文件！

   • 建议在执行前 提交 Git 或确认已备份。
   • 可先用 --check 模式预览哪些文件会被修改：

     npx prettier --check .
     

2. 不要格式化非源码文件

   • 如 node_modules、编译产物（dist/）、配置文件（.env）等，务必通过 .prettierignore 排除。

3. 与 ESLint 冲突？

   • Prettier 负责格式（空格、换行），ESLint 负责代码质量（未使用变量、潜在 bug）。
   • 推荐使用 eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的规则。

---

六、工程化集成建议

✅ 集成到 VS Code

1. 安装插件：Prettier - Code formatter
2. 设置保存时自动格式化：

   // settings.json
   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
   

✅ 集成到 Git Hooks（提交前自动格式化）

使用 Husky + lint-staged：

npm install --save-dev husky lint-staged
npx husky install
npx husky add .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/

---

欢迎点赞、收藏、评论交流！