选项
Prettier 提供了一些格式选项。
要了解有关 Prettier 对选项的立场的更多信息，请参阅 选项理念。
如果更改任何选项，建议通过 配置文件 进行更改。这样，Prettier CLI、编辑器集成和其他工具就能知道您使用了哪些选项。
实验性三元运算符
在成为默认行为之前，尝试一下 prettier 的 新的三元运算符格式化。
有效选项
true- 使用好奇的三元运算符，问号位于条件之后。false- 保留三元运算符的默认行为；将问号保留在与结果相同的行上。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --experimental-ternaries | experimentalTernaries: <bool> |
打印宽度
指定打印机换行的行长度。
为了可读性，我们建议不要使用超过 80 个字符。
在代码风格指南中，最大行长规则通常设置为 100 或 120。但是，当人类编写代码时，他们不会努力在每一行上达到最大列数。开发人员通常使用空格来分解长行以提高可读性。在实践中，平均行长通常远低于最大值。
Prettier 的 printWidth 选项的工作方式不同。它不是硬性规定的最大允许行长限制。它是一种告诉 Prettier 您希望行大致有多长的方法。Prettier 将创建更短和更长的行，但通常会努力满足指定的 printWidth。
请记住，计算机很笨。您需要明确告诉它们该做什么，而人类可以做出自己的（隐式）判断，例如何时换行。
换句话说，不要尝试像使用 ESLint 的 max-len 一样使用 printWidth - 它们不一样。max-len 只是说明最大允许行长是多少，但没有说明通常的首选长度是多少 - 这就是 printWidth 指定的内容。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
80 | --print-width <int> | printWidth: <int> |
在 .editorconfig 文件 中设置 max_line_length 将配置 Prettier 的打印宽度，除非被覆盖。
（如果您在格式化 Markdown 时不希望换行，可以将 散文换行 选项设置为禁用它。）
制表符宽度
指定每个缩进级别的空格数。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
2 | --tab-width <int> | tabWidth: <int> |
在 .editorconfig 文件 中设置 indent_size 或 tab_width 将配置 Prettier 的制表符宽度，除非被覆盖。
制表符
使用制表符而不是空格缩进行。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --use-tabs | useTabs: <bool> |
在 .editorconfig 文件 中设置 indent_style 将配置 Prettier 的制表符用法，除非被覆盖。
(制表符将用于 *缩进*，但 Prettier 使用空格来 *对齐* 东西，例如在三元运算符中。此行为称为 SmartTabs。)
分号
在语句末尾打印分号。
有效选项
true- 在每个语句末尾添加分号。false- 仅在可能导致 ASI 故障的行首添加分号。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
true | --no-semi | semi: <bool> |
引号
使用单引号而不是双引号。
注意
- JSX 引号忽略此选项 - 请参阅 jsx-single-quote。
- 如果引号的数量超过了另一种引号，则将使用使用较少的引号来格式化字符串 - 例如：
"I'm double quoted"的结果为"I'm double quoted"，而"This \"example\" is single quoted"的结果为'This "example" is single quoted'。
有关更多信息，请参阅 字符串基本原理。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --single-quote | singleQuote: <bool> |
对象属性引号
更改对象中属性的引号方式。
有效选项
"as-needed"- 仅在需要时为对象属性添加引号。"consistent"- 如果对象中至少一个属性需要引号，则为所有属性添加引号。"preserve"- 保留对象属性中引号的输入用法。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
"as-needed" | --quote-props <as-needed|consistent|preserve> | quoteProps: "<as-needed|consistent|preserve>" |
请注意，Prettier 永远不会在 Angular 表达式、TypeScript 和 Flow 中取消数字属性名称的引号，因为在这些语言中字符串和数字键之间的区别非常重要。请参阅：Angular、TypeScript、Flow。此外，Prettier 不会为 Vue 取消数字属性的引号（请参阅关于此的 问题）。
JSX 引号
在 JSX 中使用单引号而不是双引号。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --jsx-single-quote | jsxSingleQuote: <bool> |
尾随逗号
默认值在 v3.0.0 中从 es5 更改为 all
在多行逗号分隔的语法结构中尽可能打印尾随逗号。（例如，单行数组永远不会获得尾随逗号。）
有效选项
"all"- 尽可能使用尾随逗号（包括 函数参数和调用）。要运行以这种方式格式化的 JavaScript 代码，需要一个支持 ES2017（Node.js 8+ 或现代浏览器）或 向下编译 的引擎。这也启用了 TypeScript 类型参数中的尾随逗号（自 2018 年 1 月发布的 TypeScript 2.7 开始支持）。"es5"- 在 ES5 中有效的尾随逗号（对象、数组等）。TypeScript 和 Flow 中类型参数中的尾随逗号。"none"- 没有尾随逗号。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
"all" | --trailing-comma <all|es5|none> | trailingComma: "<all|es5|none>" |
括号间距
在对象字面量中的括号之间打印空格。
有效选项
true- 示例：{ foo: bar }。false- 示例：{foo: bar}。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
true | --no-bracket-spacing | bracketSpacing: <bool> |
括号换行
将多行 HTML（HTML、JSX、Vue、Angular）元素的 > 放置在最后一行末尾，而不是单独放在下一行（不适用于自闭合元素）。
有效选项
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>
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --bracket-same-line | bracketSameLine: <bool> |
[已弃用] JSX 括号
此选项已在 v2.4.0 中弃用，请改用 --bracket-same-line
将多行 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>
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --jsx-bracket-same-line | jsxBracketSameLine: <bool> |
箭头函数括号
首次在 v1.9.0 中可用，默认值在 v2.0.0 中从 avoid 更改为 always
在唯一的箭头函数参数周围包含括号。
有效选项
"always"- 始终包含括号。示例：(x) => x"avoid"- 尽可能省略括号。示例：x => x
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
"always" | --arrow-parens <always|avoid> | arrowParens: "<always|avoid>" |
乍一看，避免使用括号似乎是更好的选择，因为它减少了视觉干扰。但是，当 Prettier 删除括号时，添加类型注释、额外参数或默认值以及进行其他更改变得更加困难。一致地使用括号在编辑实际代码库时提供了更好的开发人员体验，这证明了该选项的默认值是合理的。
范围
仅格式化文件的一部分。
这两个选项可用于格式化从给定字符偏移量开始和结束的代码（分别为包含和排除）。范围将扩展
- 向后到包含所选语句的第一行的开头。
- 向前到所选语句的末尾。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
0 | --range-start <int> | rangeStart: <int> |
Infinity | --range-end <int> | rangeEnd: <int> |
解析器
指定要使用的解析器。
Prettier 会根据输入文件路径自动推断解析器，因此您无需更改此设置。
babel 和 flow 解析器都支持相同的 JavaScript 功能集（包括 Flow 类型注释）。它们在某些极端情况下可能有所不同，因此，如果您遇到其中一种情况，可以尝试使用 flow 而不是 babel。typescript 和 babel-ts 也差不多。babel-ts 可能支持 TypeScript 尚未支持的 JavaScript 功能（提案），但在处理无效代码时不太宽容，并且不如 typescript 解析器经过实战检验。
有效选项
"babel"（通过 @babel/parser）在 v1.16.0 之前称为"babylon""babel-flow"（与"babel"相同，但显式启用 Flow 解析以避免歧义）首次在 v1.16.0 中可用"babel-ts"（类似于"typescript"，但使用 Babel 及其 TypeScript 插件）首次在 v2.0.0 中可用"flow"（通过 flow-parser）"typescript"（通过 @typescript-eslint/typescript-estree）首次在 v1.4.0 中可用"espree"（通过 espree）首次在 v2.2.0 中可用"meriyah"（通过 meriyah）首次在 v2.2.0 中可用"acorn"（通过 acorn）首次在 v2.6.0 中可用"css"（通过 postcss）首次在 v1.7.1 中可用"scss"（通过 postcss-scss）首次在 v1.7.1 中可用"less"（通过 postcss-less）首次在 v1.7.1 中可用"json"（通过 @babel/parser parseExpression）首次在 v1.5.0 中可用"json5"（与"json"使用相同的解析器，但输出为 json5）首次在 v1.13.0 中可用"jsonc"（与"json"使用相同的解析器，但输出为“带注释的 JSON”）首次在 v3.2.0 中可用"json-stringify"（与"json"使用相同的解析器，但输出类似于JSON.stringify）首次在 v1.13.0 中可用"graphql"（通过 graphql/language）首次在 v1.5.0 中可用"markdown"（通过 remark-parse）首次在 v1.8.0 中可用"mdx"（通过 remark-parse 和 @mdx-js/mdx）首次在 v1.15.0 中可用"html"（通过 angular-html-parser）首次在 1.15.0 中可用"vue"（与"html"使用相同的解析器，但也格式化 Vue 特定的语法）首次在 1.10.0 中可用"angular"（与"html"使用相同的解析器，但也通过 angular-estree-parser 格式化 Angular 特定的语法）首次在 1.15.0 中可用"lwc"（与"html"使用相同的解析器，但也格式化 LWC 特定的语法，用于未加引号的模板属性）首次在 1.17.0 中可用"yaml"（通过 yaml 和 yaml-unist-parser）首次在 1.14.0 中可用
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
| 无 | --parser <string> | parser: "<string>" |
注意：默认值为 "babylon"，直到 v1.13.0。
注意：自定义解析器 API 已在 v3.0.0 中移除。请改用 插件（迁移方法）。
文件路径
指定要用于推断使用哪个解析器的文件名。
例如，以下将使用 CSS 解析器
cat foo | prettier --stdin-filepath foo.css
此选项仅在 CLI 和 API 中有用。在配置文件中使用它没有意义。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
| 无 | --stdin-filepath <string> | filepath: "<string>" |
要求使用标记
首次在 v1.7.0 中可用
Prettier 可以限制自身仅格式化包含特殊注释（称为标记）的文件，该注释位于文件顶部。在将大型、未格式化的代码库逐渐过渡到 Prettier 时，这非常有用。
如果文件的第一条注释如下，则在提供 --require-pragma 时将对其进行格式化
/**
* @prettier
*/
或
/**
* @format
*/
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --require-pragma | requirePragma: <bool> |
插入标记
首次在 v1.8.0 中可用
Prettier 可以将特殊的 @format 标记插入文件顶部，指定该文件已使用 Prettier 进行格式化。当与 --require-pragma 选项一起使用时，此方法效果很好。如果文件顶部已经存在文档块，则此选项将在其中添加一个换行符以及 @format 标记。
请注意，“in tandem”并不意味着“同时”。当这两个选项同时使用时，--require-pragma 优先级更高，因此 --insert-pragma 将被忽略。其理念是在大型代码库中逐步采用 Prettier 的过程中，参与过渡过程的开发人员使用 --insert-pragma，而 --require-pragma 则由团队的其他成员和自动化工具使用，仅处理已过渡的文件。此功能的灵感来自 Facebook 的采用策略。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --insert-pragma | insertPragma: <bool> |
散文换行
首次在 v1.8.2 中可用
默认情况下，Prettier 不会更改 Markdown 文本中的换行，因为某些服务使用对换行符敏感的渲染器，例如 GitHub 评论和 BitBucket。要使 Prettier 将散文换行到打印宽度，请将此选项更改为“always”。如果希望 Prettier 强制所有散文块都位于一行上，并依赖于编辑器/查看器的软换行，则可以使用 "never"。
有效选项
"always"- 如果散文超过打印宽度，则换行。"never"- 将每个散文块拆分为一行。"preserve"- 不执行任何操作，保持散文原样。首次在 v1.9.0 中可用
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
"preserve" | --prose-wrap <always|never|preserve> | proseWrap: "<always|never|preserve>" |
HTML 空格敏感度
首次在 v1.15.0 中可用。Handlebars 首次在 2.3.0 中可用
指定 HTML、Vue、Angular 和 Handlebars 的全局空格敏感度。有关更多信息，请参阅空格敏感格式。
有效选项
"css"- 尊重 CSSdisplay属性的默认值。对于 Handlebars，与strict的处理方式相同。"strict"- 所有标签周围的空格（或空格的缺失）都被视为有意义的。"ignore"- 所有标签周围的空格（或空格的缺失）都被视为无意义的。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
"css" | --html-whitespace-sensitivity <css|strict|ignore> | htmlWhitespaceSensitivity: "<css|strict|ignore>" |
Vue 文件中 script 和 style 标签的缩进
首次在 v1.19.0 中可用
是否缩进 Vue 文件中 <script> 和 <style> 标签内的代码。
有效选项
false- 不要缩进 Vue 文件中的 script 和 style 标签。true- 缩进 Vue 文件中的 script 和 style 标签。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --vue-indent-script-and-style | vueIndentScriptAndStyle: <bool> |
行尾
首次在 v1.15.0 中可用，默认值在 v2.0.0 中从 auto 更改为 lf
出于历史原因，文本文件中的行尾存在两种常见的格式。即 \n（或 LF，表示换行符）和 \r\n（或 CRLF，表示回车符 + 换行符）。前者在 Linux 和 macOS 上很常见，而后者在 Windows 上很流行。有关其原因的一些详细信息可以在维基百科上找到。
当人们在来自不同操作系统的项目上进行协作时，很容易导致共享的 git 存储库中出现混合的行尾。Windows 用户也可能意外地将先前已提交的文件中的行尾从 LF 更改为 CRLF。这样做会生成一个很大的 git diff，从而使文件的逐行历史记录（git blame）更难浏览。
如果您想确保整个 git 存储库中仅包含 Prettier 覆盖的文件中的 Linux 风格的行尾
- 确保 Prettier 的
endOfLine选项设置为lf（这是从 v2.0.0 开始的默认值） - 配置提交前钩子，该钩子将运行 Prettier
- 使用
--check标志在您的 CI 管道中配置 Prettier 以运行。如果您使用 Travis CI，请在.travis.yml中将autocrlf选项设置为input。 - 将
* text=auto eol=lf添加到存储库的.gitattributes文件中。您可能需要请 Windows 用户在进行此更改后重新克隆您的存储库，以确保 git 在检出时未将LF转换为CRLF。
所有现代文本编辑器在所有操作系统中都能够在使用 \n（LF）时正确显示行尾。但是，旧版本的 Windows 记事本将此类行在视觉上压缩为一行，因为它们只能处理 \r\n（CRLF）。
有效选项
"lf"– 仅换行符（\n），在 Linux 和 macOS 以及 git 存储库内部很常见"crlf"- 回车符 + 换行符字符（\r\n），在 Windows 上很常见"cr"- 仅回车符字符（\r），很少使用"auto"- 保留现有的行尾（一个文件中的混合值通过查看第一行之后使用的内容进行规范化）
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
"lf" | --end-of-line <lf|crlf|cr|auto> | endOfLine: "<lf|crlf|cr|auto>" |
在.editorconfig 文件中设置 end_of_line 将配置 Prettier 的行尾用法，除非被覆盖。
嵌入式语言格式化
首次在 v2.1.0 中可用
控制 Prettier 是否格式化嵌入在文件中的带引号的代码。
当 Prettier 识别出您似乎已将某些它知道如何格式化的代码放在另一个文件中的字符串中时，例如在 JavaScript 中带有名为 html 的标签的标记模板或 Markdown 中的代码块中，它将默认尝试格式化该代码。
有时这种行为是不希望的，特别是在您可能没有打算将字符串解释为代码的情况下。此选项允许您在默认行为（auto）和完全禁用此功能（off）之间切换。
有效选项
"auto"– 如果 Prettier 可以自动识别，则格式化嵌入式代码。"off"- 从不自动格式化嵌入式代码。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
"auto" | --embedded-language-formatting=<off|auto> | embeddedLanguageFormatting: "<off|auto>" |
每行一个属性
首次在 v2.6.0 中可用
在 HTML、Vue 和 JSX 中强制每行一个属性。
有效选项
false- 不要强制每行一个属性。true- 强制每行一个属性。
| 默认值 | CLI 覆盖 | API 覆盖 |
|---|---|---|
false | --single-attribute-per-line | singleAttributePerLine: <bool> |