Appearance
Prettier基础概念
Prettier是一个固执的代码格式化工具，它会解析您的代码，然后使用自己的规则重新打印代码，同时保留最大格式信息。理解Prettier的基础概念对于有效使用它至关重要。
Prettier的核心理念
固执己见（Opinionated）
Prettier是一个固执的代码格式化工具，这意味着它不会让您选择格式风格。相反，它提供了有限的配置选项，强制执行一致的代码风格。这种设计的目的是消除关于代码风格的争论和配置的复杂性。
无格式保留（Format-agnostic）
Prettier的另一个重要特性是格式保留。它会解析代码，然后使用自己的规则重新打印，而不保留原始格式。这意味着无论原始代码的格式如何，Prettier都会按照其规则进行格式化。
Prettier的工作原理
Prettier的工作流程包括三个主要步骤：
- 解析（Parse）：将源代码解析为抽象语法树（AST）
- 格式化（Print）：根据Prettier的规则和配置重新格式化代码
- 输出（Output）：生成格式化后的代码
主要配置选项详解
行宽控制
printWidth 选项控制每行的最大字符数。当代码超过此限制时，Prettier会自动换行。
json
{
"printWidth": 80
}
缩进设置
tabWidth 选项指定缩进使用的空格数，useTabs 选项决定是否使用制表符而非空格。
json
{
"tabWidth": 2,
"useTabs": false
}
语句分隔符
semi 选项控制是否在语句末尾添加分号。
json
{
"semi": true
}
引号使用
singleQuote 选项决定是否使用单引号而非双引号。
json
{
"singleQuote": true
}
尾随逗号
trailingComma 选项控制在对象或数组的最后一个元素后是否添加逗号。
json
{
"trailingComma": "es5"
}
支持的文件类型
Prettier支持多种文件类型的格式化：
- JavaScript (JS, JSX)
- TypeScript (TS, TSX)
- Flow
- CSS, SCSS, Less
- HTML
- JSON
- GraphQL
- Markdown
- YAML
- Vue
- Angular
- And more...
Prettier与其他工具的区别
与ESLint等工具不同，Prettier专注于代码格式化而非代码质量检查。ESLint可以检测代码中的潜在错误和不良实践，而Prettier则专注于代码的外观和格式。
Prettier的局限性
尽管Prettier功能强大，但它也有一些局限性：
- 有限的配置选项：Prettier故意限制配置选项，以强制执行一致的风格
- 无法修复代码逻辑问题：Prettier只处理格式，不处理代码逻辑
- 可能与团队偏好冲突：由于其固执的特性，Prettier的风格可能与团队的偏好不完全一致
最佳实践
- 早期采用：在项目开始时就采用Prettier，避免后期格式化大量现有代码
- 团队一致：确保整个团队都使用相同的Prettier配置
- 集成到开发流程：将Prettier集成到编辑器、构建工具和Git Hooks中
- 定期更新：随着Prettier版本更新，定期更新配置和工具