安装指南

首先，在本地安装Prettier：

npm
npm install --save-dev --save-exact prettier
# --save-dev：将Prettier保存为开发依赖项
# --save-exact：精确锁定安装版本号

相关信息

如果存在.gitignore文件，Prettier会自动遵循其规则。您也可以基于.eslintignore创建.prettierignore。

[其他技巧]

若项目暂不需格式化HTML文件，添加*.html到忽略规则。

现在格式化所有文件：

npm
npx prettier . --write
# npx运行本地安装的Prettier
# --write：直接覆盖原文件格式化

相关信息

npx是什么？它是npm内置工具，用于运行本地安装的包。后文将省略npx前缀简化命令。

相关信息

如果忘记安装直接运行，npx会临时下载最新版。由于Prettier每次更新都会调整格式化规则，强烈建议在package.json中锁定版本！本地安装执行更快更安全。

相关信息

yarn exec的作用是运行本地安装的Prettier。后文将省略该前缀简化命令。

相关信息

pnpm exec的作用是运行本地安装的Prettier。后文将省略该前缀简化命令。

相关信息

bunx的作用是运行本地安装的Prettier。后文将省略该前缀简化命令。

相关信息

如果忘记安装直接运行，bunx会临时下载最新版，可能导致格式不一致问题。建议在package.json中锁定版本！

prettier --write . 可全局格式化，但在大型项目中可能较慢。可指定目录(prettier --write app/)或单个文件(prettier --write app/components/Button.js)。也支持使用https://github.com/mrmlnc/fast-glob#pattern-syntax，例如：prettier --write "app/**/*.test.js" 格式化所有测试文件。

在CI环境中运行以下命令确保团队格式统一，避免协作冲突：

npx prettier . --check
# --check：仅检查文件是否已格式化（不修改源文件）

--check与--write功能相似但仅检查不修改，两者是运行Prettier的最常用方式。

编辑器配置

命令行格式化适合入门，但配合编辑器使用体验最佳——可通过快捷键或保存时自动格式化。当代码行过长时，一键自动换行；粘贴代码缩进混乱时，自动修复格式。

参考editors.md配置环境。若编辑器不支持，可改用watching-files.md运行Prettier。

相关信息

不要跳过本地安装！编辑器插件会调用本地Prettier版本，确保各项目版本一致（避免因版本差异导致意外格式变更）。

命令行运行仍是重要备选方案，也是CI环境的必要方案。

ESLint（与其他检查器）

若使用ESLint，请安装 https://github.com/prettier/eslint-config-prettier#installation 解决规则冲突。它会关闭所有与Prettier冲突的ESLint规则。Stylelint用户可使用 https://github.com/prettier/stylelint-config-prettier。

（了解格式化与检查的区别请参考comparison.md，深度配置参考integrating-with-linters.md，更多工具集成参考related-projects.md。）

Git钩子

除命令行、CI检查和编辑器集成外，还可将Prettier设置为Git预提交钩子（pre-commit hook），确保每次提交都自动格式化，无需等待CI检测。

例如配置提交前自动格式化：

  1. 安装https://github.com/typicode/husky和https://github.com/okonet/lint-staged：
npm
npm install --save-dev husky lint-staged
npx husky init  # 初始化husky
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"  # 创建预提交钩子
  1. 在package.json中添加配置：
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
# 对所有文件执行格式化
# --ignore-unknown：跳过未知类型文件

相关信息

若同时使用ESLint，请确保在Prettier前运行ESLint。

详见precommit.md。

总结

安装流程总结：

  1. 精确安装本地版本：锁定package.json中的Prettier版本，确保团队成员使用相同版本（即使补丁版本也可能导致格式差异）
  2. 创建配置文件：添加.prettierrc告知编辑器使用Prettier
  3. 设置忽略规则：创建.prettierignore指定无需格式化的文件/目录
  4. CI环境检查：运行prettier --check .确保格式统一
  5. 编辑器集成：最佳体验方案
  6. 解决规则冲突：使用https://github.com/prettier/eslint-config-prettier兼容ESLint
  7. 自动化提交：通过预提交钩子保证每次提交都格式化
最后更新: