阿克苏地区网站建设_网站建设公司_移动端适配_seo优化

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

常用配置项说明：

完整配置参考：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：

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时，只会格式化本次提交的文件，高效又安全！

七、总结

Prettier 不仅是一个工具，更是一种工程规范。花 5 分钟配置好它，未来能为你和团队节省数百小时的代码审查与格式争论时间。

附：官方资源

• 官网：https://prettier.io
• GitHub：https://github.com/prettier/prettier
• Playground（在线体验）：https://prettier.io/playground/

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