options

Prettier 提供了一系列格式化配置选项。

要了解 Prettier 对选项的设计理念，请参阅option-philosophy.md。

建议通过configuration.md修改选项，这样 Prettier CLI、editors.md和其他工具能识别您的配置。

实验性三元表达式 (Experimental Ternaries)

在成为默认行为前，可尝试 Prettier 的https://github.com/prettier/prettier/pull/13183。

有效选项：

• true - 使用好奇三元表达式（问号在条件后）
• false - 保留默认三元表达式行为（问号与结果在同一行）

实验性运算符位置 (Experimental Operator Position)

有效选项：

• "start" - 当二元表达式换行时，运算符在新行开头
• "end" - 默认行为，运算符在上一行末尾

打印宽度 (Print Width)

指定格式化换行的行长度。

https://editorconfig.org/中的max_line_length会覆盖此配置（Markdown 格式化可通过#prose-wrap禁用换行）。

缩进宽度 (Tab Width)

指定每级缩进的空格数。

https://editorconfig.org/中的indent_size或tab_width会覆盖此配置。

使用制表符 (Tabs)

用制表符替代空格缩进。

https://editorconfig.org/中的indent_style会覆盖此配置（Prettier 使用https://www.emacswiki.org/emacs/SmartTabs策略，对齐仍用空格）。

分号 (Semicolons)

控制语句末尾是否打印分号。

有效选项：

• true - 每条语句末尾添加分号
• false - 仅在可能rationale.md#semicolons的行首添加

引号 (Quotes)

使用单引号替代双引号。

注意：

• JSX 引号不受此选项影响（见 [jsx-single-quote](#jsx-quotes）
• 根据引号出现频率自动选择，例如 "I'm double quoted" 保持双引号，"This \"example\" is single quoted" 转为单引号

详见rationale.md#strings。

属性引号 (Quote Props)

控制对象属性何时加引号。

有效选项：

• "as-needed" - 仅在必需时加引号
• "consistent" - 若任一属性需引号，则全部添加
• "preserve" - 保留输入中的引号用法

注意：Prettier 不会取消 Angular/TypeScript/Flow 中数字属性名的引号（Angular示例, TypeScript示例, Flow示例），Vue 同理（相关issue）。

JSX 引号 (JSX Quotes)

在 JSX 中使用单引号替代双引号。

尾部逗号 (Trailing Commas)

v3.0.0 起默认值从 es5 改为 all

在多行逗号分隔结构中尽可能添加尾部逗号（单行数组不添加）。

有效选项：

• "all" - 尽可能添加（包括https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas#Trailing_commas_in_functions），需 ES2017+ 环境
• "es5" - 在 ES5 有效处添加（对象/数组等）
• "none" - 不添加

括号间距 (Bracket Spacing)

控制对象字面量中括号内的空格。

有效选项：

• true - 示例：{ foo: bar }
• false - 示例：{foo: bar}

对象换行 (Object Wrap)

v3.5.0 新增

控制对象字面量的换行策略。

有效选项：

• "preserve" - 若首属性前有换行则保持多行
• "collapse" - 尽可能单行显示

括号同行 (Bracket Line)

将多行 HTML/JSX 元素的 > 放在末行末尾而非单独一行（自闭合元素除外）。

有效选项：

• true - 示例：

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

• false - 示例：

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

[已弃用] JSX 括号 (JSX Brackets)

cat foo | prettier --stdin-filepath foo.css

/**
 * @prettier
 */

/**
 * @format
 */

/**
 * @noprettier
 */

/**
 * @noformat
 */

总结

本文全面解析了 Prettier 的格式化配置选项，涵盖代码风格控制的各个方面：

1. 基础格式：包括缩进方式（空格/制表符）、行宽限制、引号规则等核心设置
2. 高级特性：实验性三元表达式、运算符位置等前沿功能
3. 语言专项：针对 HTML/JSX/Vue 的特殊处理规则
4. 工作流集成：指令控制、范围格式化等协作场景功能
5. 跨平台兼容：行尾符统一方案解决 OS 差异问题

所有选项均支持 CLI 参数、API 配置和文件覆盖三种方式，建议通过配置文件统一管理。特殊注意事项已用警告块标出，关键概念附设计原理链接供深度参考。