1.4快速上手：第一次运行Prettier

1.4 快速上手：第一次运行 Prettier

安装（续）

Prettier 是一个 Node.js 包，通过 npm 或 yarn 安装。你有两种安装方式：

项目级安装（推荐）：把 Prettier 作为项目的开发依赖，确保团队成员使用相同的版本。

npm install --save-dev prettier
​

全局安装：如果你需要在任意目录下快速格式化文件，也可以全局安装，但不推荐用于正式项目，因为无法锁定版本。

npm install -g prettier
​

安装完成后，可以用 npx prettier --version 确认版本号。

第一次格式化

假设你有一个 JavaScript 项目，代码风格杂乱。让我们创建一个简单的示例来演示效果。

先写一段风格混乱的代码（保存为 messy.js）：

const data={name:"Alice",age:30,city:"Beijing",email:"alice@example.com"};
function formatUser(user){
  let result="User: ";
  result+=user.name;
  if(user.age>=18){result+=" (adult)"}
  else{result+=" (minor)"}
  return result
}
const users=[{name:"Alice",age:30},{name:"Bob",age:16},{name:"Charlie", age:25}];
users.forEach(( user )=>{console.log(formatUser(user))})
​

这段代码在语法上是合法的，JavaScript 引擎能正常执行。但它混合了多种风格问题：对象字面量没有空格、字符串用双引号、if/else 没有换行、缩进不一致、forEach 的回调参数有多余空格。

运行 Prettier 格式化：

npx prettier --write messy.js
​

你会在终端看到：

messy.js 43ms
​

打开 messy.js，内容变成了这样：

const data = {
  name: "Alice",
  age: 30,
  city: "Beijing",
  email: "alice@example.com",
};

function formatUser(user) {
  let result = "User: ";
  result += user.name;
  if (user.age >= 18) {
    result += " (adult)";
  } else {
    result += " (minor)";
  }
  return result;
}

const users = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 16 },
  { name: "Charlie", age: 25 },
];

users.forEach((user) => {
  console.log(formatUser(user));
});
​

变化一目了然：

• 对象属性之间增加了换行和缩进
• 运算符两侧加上了空格
• if/else 块增加了花括号换行
• 函数调用参数多出来时自动拆成多行
• 行尾统一加了分号
• 字符串统一成双引号（Prettier 默认值）
• 数组元素各占一行

所有这些变化只来自一条命令。你不需要告诉 Prettier 哪里该换行、哪里该加空格——它根据 AST 分析自动做出判断。

只检查不修改

有时候你不想修改文件，只想知道哪些文件不符合格式规范。用 --check 代替 --write：

npx prettier --check "src/**/*.js"
​

这个命令不会修改任何文件，只输出检查结果。如果所有文件都格式正确，退出码为 0；如果存在不符合格式的文件，退出码为 1 并列出文件列表。这非常适合用在 CI 流水线中——检查不通过就阻断部署，迫使开发者修复格式问题。

处理整个项目

实际使用中，通常不是格式化单个文件，而是处理整个项目：

# 格式化 src 目录下所有匹配的文件
npx prettier --write "src/**/*.{js,jsx,ts,tsx,css,json}"

# 检查整个项目
npx prettier --check .
​

第一个命令使用了 glob 模式来指定文件类型。Prettier 默认支持 JavaScript、TypeScript、CSS、JSON、Markdown、YAML、GraphQL 等格式，不需要额外的解析器配置。

配置文件

如果你需要调整少量配置（大多数情况下不需要），可以创建一个配置文件。最简单的形式：

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "printWidth": 100
}
​

把 singleQuote 改成 true 后，所有双引号字符串会被转换成单引号。printWidth: 100 让行宽限制从默认的 80 放宽到 100 字符——这对现代宽屏显示器来说更实用。

Prettier 会自动在项目根目录查找配置文件，支持的格式包括 .prettierrc（JSON）、.prettierrc.json、.prettierrc.js、prettier.config.js、以及 package.json 中的 "prettier" 字段。如果多个配置源同时存在，Prettier 有明确的优先级规则——第三章会详细讲。

第一次在真实项目中的体验

如果你的团队之前没用过 Prettier，第一次在真实项目上运行时会经历一个有意思的过程：

# 第一步：检查有多少文件需要格式化
npx prettier --check .
​

大概率你会看到一大堆文件列表。这个数字可能会让你犹豫——改动这么多文件会不会有风险？

答案是：风险极低。因为 Prettier 只改变代码的格式，不改变语义。一个功能正常的代码库，在 Prettier 格式化后仍然功能正常。唯一可能出问题的是极少数格式敏感的场景（比如模板字符串中的换行），而这些场景可以用 .prettierignore 排除或行内注释跳过。

# 第二步：批量格式化
npx prettier --write .
​

这会在一个 commit 里把所有文件统一到 Prettier 的格式。这个 commit 最好单独提交，标题可以写 style: format all files with Prettier，这样在 git 历史中它是一块清晰的格式变更，不会和逻辑改动混在一起。

格式化完之后，后续的所有开发就进入了 Prettier 的工作流：编辑器保存时自动格式化（下一章介绍），提交时 pre-commit 钩子兜底，CI 里 prettier --check 做最终校验。从此以后，格式不一致的问题在这个项目中不会再出现。

图 1-6：Prettier 引入流程

这个"三步走"的过程——检查、格式化、配置自动化——是引入 Prettier 到任何项目的标准路径。整个过程通常在半小时内完成，但收益会持续整个项目的生命周期。

常见的第一天问题

"格式化后代码变长了怎么办？" 这是因为 Prettier 的规则倾向于增加可读性（多换行、多空格），代价是文件行数增加。这在 Git diff 中会暂时看起来变化很大，但只在第一次全量格式化时有这个问题。后续的增量改动 diff 是干净的。

"有些第三方生成的代码不想被格式化" 在 node_modules、dist、build 等目录下的文件，Prettier 默认不会处理（它会忽略 .gitignore 中的条目）。如果有其他需要排除的目录，在第三章会讲 .prettierignore 的配置。

"团队有人用 VS Code 有人用 WebStorm 怎么办？" Prettier 的格式化结果与编辑器无关——不管你在什么编辑器里写代码，Prettier 都会输出相同的格式。唯一需要分别配置的是编辑器的保存时格式化快捷方式，但格式化本身是编辑器无关的。

"TypeScript 项目能用吗？" 完全可以。Prettier 内置了 TypeScript 支持，不需要额外配置。它会正确处理 TS 的类型注解、接口、泛型等语法。

Prettier 的上手门槛极低——安装、运行、完成。但它带来的工作流改变是深远的。本章剩下的篇幅里，我们会深入它的内部实现和工作原理，帮助你理解为什么这个简单的命令能产生这么可靠的结果。