Prettier

第一章：初识

一、简介

1. 是什么

Prettier 是一款有主见的代码格式化工具。Prettier 会在你的整个代码库中强制执行一致的代码风格（即不会影响 AST 的代码格式），因为它会忽略原始样式，将其解析并使用自己的规则重新打印解析后的 AST。

中文文档：Prettier 中文

2. Prettier 能取代 Lint 工具吗？

Lint 工具管的太多了，它里面包含了两类规则：

• 格式化规则：比如缩进是用空格还是 Tab、代码太长要不要换行、关键字后面要不要加空格。这些只关乎代码“长什么样”，不影响代码的功能。
• 代码质量规则：比如定义了变量但没使用（no-unused-vars），或者写了容易导致 Bug 的错误语法。这些关乎代码“能不能正常运行”。

而 Prettier 是更像专业的“理发师”。格式化规则这部分工作，以后就不要让 Lint 工具做了，交给 Prettier。因为 Prettier 本质上是一个“推翻重写”的工具：它不管你原来写的格式多乱，它会把你的代码读懂，然后按照它自己内置的、极其统一的标准，重新把代码格式排版一遍。这样团队里所有人的代码风格就会绝对一致。

Lint 应该专注抓 Bug。既然格式排版已经被 Prettier 包揽了，那么 Lint 工具（ESLint）就可以专注于它最有价值的工作 —— 代码质量规则（即抓 Bug）。Prettier 只能给代码排版，它发现不了你代码里的逻辑错误，而这正是 Lint 工具大显身手的地方。

总结：使用 Prettier 进行格式化，使用 Lint 工具来捕获错误！

二、快速入门

1. 项目中使用

1）本地安装 Prettier。

npm install --save-dev --save-exact prettier

2）创建配置文件 .prettierrc 和 .prettierignore

3）使用 Prettier 格式化所有文件

npx prettier --write .

上面命令用来格式化所有内容，但对于大型项目，可能需要一些时间。您可以运行 prettier --write app/ 来格式化特定目录，或 prettier --write app/components/Button.js 来格式化特定文件。或者使用通配符，例如 prettier --write "app/**/*.test.js" 来格式化目录中的所有测试相关的代码（有关支持的通配符语法，请参阅 fast-glob）。

npx prettier . --check

--check 仅检查文件是否已格式化。

2. 编辑器集成

VSCode 安装 Prettier - Code formatter 插件。

第二章：配置 Prettier

一、配置文件

配置文件（按优先级顺序）：

• package.json 文件中使用 "prettier" 键。
• 使用 JSON 或 YAML 格式的 .prettierrc 文件。
• 使用 .prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5 文件。
• 使用 .prettierrc.js 或 prettier.config.js 文件，该文件使用 export default 或 module.exports 导出对象（取决于您 package.json 中的 type 值）。
• 使用 .prettierrc.mjs 或 prettier.config.mjs 文件，该文件使用 export default 导出对象。
• 使用 .prettierrc.cjs 或 prettier.config.cjs 文件，该文件使用 module.exports 导出对象。
• 使用 .prettierrc.toml 文件。

配置文件将从要格式化的文件所在位置开始解析，并向上搜索文件树，直到找到配置文件。

二、选项

参考文档：选项