Prettier 暴露了部分 Config 供用户自定义配置。
结合上一节中的 CLI 配置，我们就可以调整项目中的风格细节。
Config Files
Prettier 使用了 cosmiconfig 来解析配置文件。
在项目中可使用的配置方式，优先级从高到低分别为：
package.json中的prettier键值.prettierrc.prettierrc.[json|yml|yaml|json5].prettierrc.js或prettier.config.js.prettierrc.mjs或prettier.config.mjs.prettierrc.cjs或prettier.config.cjs.prettierrc.toml
Options
1.Print Width
printWidth<number> 声明指定一行代码的最大长度。
当代码的行长度超过指定的 printWidth 值时，Prettier 会尝试自动将代码拆分成多行，以保持每行代码的长度不超过 printWidth。
例如，如果你将 printWidth 设置为 80，那么当一行代码的长度超过 80 个字符时，Prettier 会自动将该行代码拆分成多行，使得每行代码的长度不超过 80 个字符。
2.Tab Width
tabWidth<number> 声明缩进占几个空格，在 useTabs 为 false 才会起作用。
如果 useTabs 为 true，则缩进宽度会固定为 1 个 tab 宽度。具体的 1 个 tab 宽度占多少空格，由编辑器设置决定。
因此，如果使用 useTabs 为 true，推荐结合 .editorconfig 文件来使用。
该属性并非声明一个 tab 占几个空格。
3.Tabs
useTabs<boolean> 声明使用 tab 进行缩进，而非 space。
通常的共识是，使用 tab 进行缩进、使用 space 进行对齐。
4.Semicolons
semi<boolean> 声明是否在表达式末尾使用分号。
5.Quotes
singleQuote<boolean> 声明使用单引号而非双引号。
6.Quote Props
quoteProps<string> 声明对象属性是否使用引号。
as-needed只有需要的时候，才会添加引号。consistent如果有任一属性带了引号，则其他属性统一带引号。preserve写成啥样，就是啥样。不作额外处理。
7.Trailing Commas
trailingComma<string> 声明尾部逗号。
all所有场景都适用尾部逗号，包含函数声明与函数调用。es5只在es5规范下使用尾部逗号。none不使用尾部逗号。
8.Bracket Spacing
bracketSpacing<boolean> 声明对象括号与文字之间是否有间距。
// true
{ foo: bar }// false
{foo: bar}9.Bracket Line
bracketSameLine<boolean> 声明 html 多行元素的末尾括号是否与末尾元素在同一条线上。
<!-- 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>10.Arrow Function Parentheses
arrowParens<string> 声明当箭头函数只有一个参数时，该参数是否保留圆括号。
always总是保留圆括号，(x) => xaviod不保留圆括号，x => x
11.End of Line
endOfLine<string> 声明行尾换行方式。
lf换行符即Line Feed（\n），在Linux、Macos以及git仓库中通用。crlf回车换行符即Carriage Return + Line Feed(\r\n)，在Windows上通用。cr回车符即Carriage Return(\r)，很少用到。auto维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）。
12.HTML Whitespace Sensitivity
htmlWhitespaceSensitivity<string> 声明 html 中空格敏感性，大多数场景下是由于空格和换行对于行内元素是会产生影响的。
css按照css规则来解析。strict所有标签里的空格，都被当做是有意义的。ignore所有标签里的空格，都被当做是无意义的。
TIP
虽然如今前端工程化中的脚手架工具，在生产打包时都会将模板中的空格抹除掉。
但考虑到实际开发中可能有纯 HTML 文件或者为了保证开发和生产表现一致，所以该项推荐设置为 css，整体来说，这样研发成本最低。
13.Vue files script and style tags indentation
vueIndentScriptAndStyle<boolean> 声明 vue 单文件中的 script 和 style 标签内的元素是否缩进。
默认为 false。
14.Single Attribute Per Line
singleAttributePerLine<boolean> 声明单行单属性。
默认为 false
<!-- false -->
<div id="target" class="model"></div><!-- true -->
<div
id="target"
class="model">
</div>15.Prose Wrap
proseWrap<string> 声明 markdown 段落是否换行。
preserve默认值，即保留markdown本身段落格式，不作额外处理。always总是将markdown段落按照printWidth的限制换行。never从不按照markdown段落按照printWidth的限制换行。
16.Require Pragma
requirePragma<boolean> 声明只有文件头部包含了特定 pragma 时，该文件才会被格式化。
/**
* @prettier
*/或者：
/**
* @format
*/17.Insert Pragma
insertPragma<boolean> 声明文件格式化之后，是否在文档头部添加 @format 的 pragma 标记。
Best Practice
笔者在项目中的配置是 .prettierrc.js，此处贴一下完整代码：
module.exports = {
// When the characters is more than 80 in the line, it will wrap.
printWidth: 80,
// The indent space is 2.
tabWidth: 2,
// The indent style is tab, not space.
useTabs: true,
// Don't use semicolon at the end.
semi: false,
// Use single quote.
singleQuote: true,
// If only when the object props need quotes, should add the quotes.
quoteProps: 'as-needed',
// Don't need the trailing comma.
trailingComma: 'none',
// Use spaces in the bracket.
bracketSpacing: true,
// The end bracket should be same line with the element attribute.
bracketSameLine: true,
// Don't use parenstheses when the arrow funtion params is only one.
arrowParens: 'avoid',
// The end of line is lf.
endOfLine: 'lf',
// It should be single attribute at per line in html or vue template.
singleAttributePerLine: true,
// Don't indent script and style at the begin in vue file.
vueIndentScriptAndStyle: false,
// The space in inline element should display as css rules. See: https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
htmlWhitespaceSensitivity: 'css',
// Keep the prose style of your writing in markdown.
proseWrap: 'preserve'
}