代码格式化工具---prettier配置

我自己的常用 prettier 配置如下：

// .prettierrc 文件
// 这里修改的都是与默认值不同的，没有修改到的就是启用默认值
// .prettierrc 文件是使用 json 格式，如果报错了，该配置文件在编辑器里面是不会生效的
{
  "bracketSpacing": true,
  "printWidth": 160,
  "semi": false,
  "singleQuote": true
}
其他还可以选择
// prettier.config.js
module.exports = {
  "bracketSpacing": true,   // 是否在对象属性添加空格，这里选择是 { foo: bar }
  "printWidth": 160,        // 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行，如果都不想换，可以添加 "proseWrap": "never"
  "semi": false,            // 是否在语句末尾打印分号，这里选择不加
  "singleQuote": true      // 是否使用单引号，这里选择使用
}
// package.json 中的 prettier 属性
{
  "prettier": {
    "bracketSpacing": true,   // 是否在对象属性添加空格，这里选择是 { foo: bar }
    "printWidth": 160,        // 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行，如果都不想换，可以添加 "proseWrap": "never"
    "semi": false,            // 是否在语句末尾打印分号，这里选择不加
    "singleQuote": true      // 是否使用单引号，这里选择使用
  }
}

常用配置文件链接---JavaScript开发中常用的代码规范配置文件

prettier 配置选项 (官网文档译文)

支持自定义的代码风格，可在CLI和API中使用。

单行代码的最大宽度 Print Width

指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行。

为了便于阅读，官方建议不要使用超过80个字符。我这边设置了160

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
80	--print-width <int>	printWidth: <int>

（如果在格式化 Markdown 时不想要换行，可以设置 Prose Wrap （是否换行） 选项以禁用它。）

Tab宽度 Tab Width

指定每个缩进级别的空格数。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
2	--tab-width <int>	tabWidth: <int>

Tab Tabs

使用制表符 (tab) 缩进行而不是空格 (space)。

1. 如果设置了制表符缩进，并且一个缩进单位4个空格，那么编辑器一个 tab 键，出现的间隔就是 "一"，一个大横杆
2. 如果设置了空格缩进，并且一个缩进单位4个空格，那么编辑器一个 tab 键，出现的间隔就是 "····"，四个小点
3. 上面两个长度单位是一样的，都是4个空格，但是空格缩进，在代码进行空白处选择的时候，是一格格选的，制表符缩进是一下子4格选的

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--use-tabs	useTabs: <bool>

（Tabs 将用于缩进，但 Prettier 使用空格来对齐代码，例如三元组。）

分号 Semicolons

在语句末尾打印分号。

有效选项：

true - 在每个语句的末尾添加分号。

false- 仅在可能引入ASI故障的行的开头添加分号。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
true	--no-semi	semi: <bool>

引号 Quotes

使用单引号而不是双引号。

笔记：

JSX 引用忽略此选项 - 请参阅 jsx-single-quote。

如果引号数超过其他引号，则使用较少的引用将用于格式化字符串

示例：

"I'm double quoted"
// 结果
"I'm double quoted"

和

"This \"example\" is single quoted"
// 结果
'This "example" is single quoted'。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--single-quote	singleQuote: <bool>

引号属性 Quote Props

引用对象中的属性时更改。

有效选项：

"as-needed" - 仅在需要时在对象属性周围添加引号。

"consistent" - 如果对象中至少有一个属性需要引号，则引用所有属性。

"preserve" - 尊重对象属性中引号的输入用法。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"as-needed"	--quote-props <as-needed | consistent | preserve>	quoteProps: "<as-needed | consistent | preserve>"

JSX引号 JSX Quotes

在JSX中使用单引号而不是双引号。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--jsx-single-quote	jsxSingleQuote: <bool>

尾随逗号 Trailing Commas

多行时尽可能打印尾随逗号。（例如，单行数组永远不会得到尾随逗号。）

有效选项：

"none" - 没有尾随逗号。

"es5" - 在ES5中有效的尾随逗号（对象，数组等）

"all" - 尽可能使用尾随逗号（包括函数参数）。这需要 nodejs 8。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"none"	--trailing-comma <none | es5 | all>	trailingComma: "<none | es5 | all>"

括号间距（这里指{、}） Bracket Spacing

在对象文字中打印括号之间的空格。

有效选项：

true- 例子：{ foo: bar }。

false- 例子：{foo: bar}。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
true	--no-bracket-spacing	bracketSpacing: <bool>

JSX 括号（这里指<、>） JSX Brackets

将 > 多行 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/.prettierrc/prettier.config.js/package.json["prettier"]
false	--jsx-bracket-same-line	jsxBracketSameLine: <bool>

箭头函数圆括号 Arrow Function Parentheses

首先在v1.9.0中提供

在单个箭头函数参数周围加上括号。

有效选项：

"avoid" - 尽可能省略parens。例：x => x

"always" - 始终包括parens。例：(x) => x

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"avoid"	--arrow-parens <avoid | always>	arrowParens: "<avoid | always>"

范围 Range

仅格式化文件的一部分。

这两个选项可用于格式化以给定字符偏移量开始和结束的代码（分别包含和排除）

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
0	--range-start <int>	rangeStart: <int>
Infinity	--range-end <int>	rangeEnd: <int>

解析器 Parser

指定要使用的解析器。

Prettier 会自动从输入文件路径中推断出解析器，因此您不必更改此设置。

这两个 babel 和 flow 解析器都支持相同的 JavaScript 功能集（包括Flow类型注释）。

它们可能在某些边缘情况下有所不同，因此如果您碰到其中一个，您可以尝试 flow 而不是 babel。

有效选项：

"babel"（来自 @babel/parser ）命名为 "babylon" until v1.16.0

"babel-flow"（与解析器 "babel" 一样，但是明确地启用 Flow 解析以避免歧义）首先在v1.16.0中可用

"flow"（通过 flow-parser）

"typescript"（来自 @typescript-eslint/typescript-estree）首先在v1.4.0中提供

"css"（通过 postcss-scss 和 postcss-less，自动检测使用哪个解释器）首先在v1.7.1中提供

"scss"（与解析器 "css"一样，更喜欢 postcss-scss ）首先在v1.7.1中提供

"less"（与解析器 "css"一样，更喜欢 postcss-less ）首先在v1.7.1中提供

"json"（来自 @babel/parser parseExpression ）首先在v1.5.0中提供

"json5"（与解析器 "json"一样，但输出为 json5 ）首先在v1.13.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 格式化 augular 特定的语法）首先在1.15.0中提供

"lwc"（与解析器 "html"一样，但也为 LWC 特定语法格式化）首先在1.17.0中可用

"yaml"（通过 yaml 和 yaml-unist-parser ）首先在1.14.0中提供

还支持自定义解析器。首先在v1.5.0中提供

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
没有	--parser <string> --parser ./my-parser	parser: "<string>" parser: require("./my-parser")

注意：默认值为"babylon"v1.13.0。

文件路径 File Path

指定用于推断要使用的解析器的文件名。

例如，以下将使用CSS解析器：

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

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
没有	--stdin-filepath <string>	filepath: "<string>"

需要编译指示 Require pragma

首先在v1.7.0中提供

Prettier 可以将自己限制为仅在文件顶部格式化包含特殊注释（称为pragma）的文件。

当逐步将大型未格式化的代码库转换为更漂亮的代码库时，这非常有用。

例如，提供以下内容作为其第一个注释的文件将被格式化 --require-pragma：

/**
 * @prettier
 */

或者

/**
 * @format
 */

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--require-pragma	requirePragma: <bool>

插入Pragma Insert Pragma

首先在v1.8.0中提供

Prettier 可以在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。

当与 --require-pragma 选项一起使用时，这很有效。

如果文件顶部已有 docblock，则此选项将使用 @format 标记向其添加换行符。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--insert-pragma	insertPragma: <bool>

是否换行 Prose Wrap

首先在v1.8.2中提供

默认情况下，Prettier 将按原样包含 markdown 文本，因为某些服务使用对行敏感的渲染器，例如 GitHub 注释和 BitBucket。

在某些情况下，您可能希望依赖编辑器/查看器，因此此选项允许您选择退出 "never"。

有效选项：

"always" - 如果超过打印宽度，请换行。

"never" - 不要换行。

"preserve" - 按原样显示。首先在v1.9.0中提供

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"preserve"	--prose-wrap <always | never | preserve>	proseWrap: "<always | never | preserve>"

HTML空白灵敏度 HTML Whitespace Sensitivity

首次在v1.15.0中提供

指定 HTML 文件的全局空白区域敏感度

有效选项：

"css"- 遵守CSS display属性的默认值。

"strict" - 空格被认为是敏感的。

"ignore" - 空格被认为是不敏感的。

html 中空格也会占位，影响布局，prettier 格式化的时候可能会将文本换行，造成布局错乱

<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>
<!-- 变成 -->
<!-- "Prettier is an opinionated code formatter. " 另起一行，在页面的布局上就会多一个节点文本出来 -->
<a href="https://prettier.io/">
  Prettier is an opinionated code formatter.
</a>

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"css"	--html-whitespace-sensitivity <css | strict | ignore>	htmlWhitespaceSensitivity: "<css | strict | ignore>"

行结束 End of Line

首次出现在1.15.0中

由于历史原因，在文本文件中存在两种常用的行结尾的风格。那是\n（或LF换行）和\r\n（或CRLF用于回车+换行）。

前者在 Linux 和 macOS 上很常见，而后者在 Windows 上很普遍。可以在维基百科上找到解释其原因的一些细节。

默认情况下，Prettier 会保留给定文件已使用的行尾的风格。它还将一个文件中的混合行结尾转换为它在第一行末尾找到的结尾。

当人们在不同操作系统上协作项目时，很容易在中央 git 存储库中找到混合行结尾。

Windows 用户也可能会意外地将已提交文件中的行结尾更改 LF 为 CRLF。

这样做会产生很大的影响 git diff，如果在代码审查过程中没有注意到，那么file（git blame）的所有逐行历史都会丢失。

如果你想确保你的 git 存储库在 Prettier 所涵盖的文件中只包含 Linux 风格的行结尾：

1. 将 endOfLine 选项设置为 lf
2. 配置一个 pre-commit 钩子，运行 Prettier
3. 配置 Prettier 在CI管道中运行 --check flag
4. Windows用户在使用您的仓库之前，运行 git config core.autocrlf false，以便git 在 checkout 时不会转换 LF 为 CRLF。或者，您可以添加 * text=auto eol=lf 到 repo 的.gitattributes 文件来实现此目的。
   
   所有操作系统中的所有现代文本编辑器都能够在使用 \n（LF）时正确显示行结尾。但是，旧版本的 Windows 记事本会直观地将这些行压缩成一行。

有效选项：

"auto" - 维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）

"lf"- Line Feed only（\n），在 Linux 和 macOS 以及 git repos 内部很常见

"crlf"- 回车符+换行符（\r\n），在 Windows 上很常见

"cr"- 仅限回车符（\r），很少使用

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"auto"	--end-of-line <auto | lf | crlf | cr>	endOfLine: "<auto | lf | crlf | cr>"