prettier 使用详细介绍

prettier 使用详细介绍

prettier是一个代码格式化工具，可以通过自定义规则来重新规范项目中的代码，去掉原始的代码风格，确保团队的代码使用统一相同的格式。

安装

npm i prettier -D

yarn add prettier --dev
1
2
3

创建一个prettierrc.*配置文件，可以手动创建，也可以手动执行以下命令：

echo {}> .prettierrc.json
1

prettierrc.*配置文件支持以下几种后缀：

• json
• yaml
• js (或者.config.js)
• cjs(或者.config.cjs)
• toml

也可以直接在package.json里的prettier字段里直接配置。

可配置的字段

printWidth

• Number，默认80

指定代码换行的行长度（默认值为80，同时为了阅读体验官方也不建议超过80），单行代码宽度超过指定的最大宽度，将会换行。

useTabs

• Boolean， 默认为false

是否使用缩进符（Tab键）

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

tabWidth

• Number，默认为2

每个缩进级别的空格数

function log() {
  // 当设置为2的时候前面就只有两个空格
  console.log(2)
}
1
2
3
4

semicolons

• Boolean，默认为true

在语句末尾是否打印分号。

当设置为false的时候，prettier会在可能引入ASI故障的行的开头自动添加分号

quotes

• Boolean，默认为false

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

JSX 引用忽略此选项， 详情看jsx-single-quote。
如果引号数超过其他引号，则使用较少的引用将用于格式化字符串（示例："I'm double quoted"结果为"I'm double quoted"和"This \"example\" is single quoted"结果为’This "example" is single quoted'）

quoteProps

有效选项：

• as-needed： 仅在需要时在对象属性周围添加引号。（默认）
• consistent： 如果对象中至少有一个属性需要引号，则引用所有属性。
• preserve： 尊重对象属性中引号的输入用法。

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

jsxSingleQuote

• Boolean，默认false

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

trailingComma

有效选项：

• none： 没有尾随逗号。
• es5： 在ES5中有效的尾随逗号（对象，数组等）
• all： 尽可能使用尾随逗号（包括函数参数）。这需要 nodejs 8+。

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

bracketSpacing

• Boolean，默认值true

是否在对象的中括号之间添加空格。

例如：

{foo: bar}
// 添加空格
{ foo: bar }
1
2
3

bracketSameLine

• Boolean，默认值为false

将 > 多行 html（HTML、JSX、Vue、Angular） 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）

例如：

<button
  className="prettier-class"
  id="prettier-id"
>
  button
</button>

// 为true时
<button
  className="prettier-class"
  id="prettier-id">
  button
</button>
1
2
3
4
5
6
7
8
9
10
11
12
13

arrowParens

有效选项：

• avoid：（默认） 尽可能省略parens。例：x => x
• always： 始终包括parens。例：(x) => x

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

range相关

只格式化文件的部分代码。

包含两个选项配置

• rangeStart
• rangeEnd

rangeStart

• Number，默认0

要开始格式化的字符索引值

rangeEnd

• Number，默认Infinity

要结束格式化的字符索引值

parser

指定要使用的解析器。Prettier 会自动从输入文件路径中推断出解析器，不需要更改这个设置。可以在查看有效的解析器

requirePragma

• Boolean，默认false

可以指定需要指定格式化的文件，当设置为true，只有文件顶部包含了以下注释的文件才会被格式化。

注释：

/**
 * @prettier
 */

// 或者
/**
 * @format
 */
1
2
3
4
5
6
7
8

insertPragma

• Boolean，默认false

在文件顶部插入一个特殊的@format注释标记，指定该文件已使用Prettier进行格式化（这个配置主要时用于大型项目代码逐步采用prettier的过程中，参与转换过程的开发人员使用insertPragma配置确保转换的代码中生成了标记，而团队的其他成员使用requirePragma，而自动化工具仅处理已经转换的文件）。当配置中存在requirePragma: true时，insertPragma配置会被忽略。

proseWrap

有效选项：

• always: 如果散文超出打印宽度，则换行。
• never： 将每一段散文合并成一行。
• preserve（默认）： 什么都不做，让散文保持原样。

用于markdown文件中的换行，根据printWidth来决定每行的字符数量。

查看以下例子

This is an example about proseWrap.
New line.

<!-- 设置printWidth为10 -->
<!-- always -->
This is an
example
about
proseWrap.
New line.


<!-- 当设置never时printWidth不生效 -->
<!-- never -->
This is an example about proseWrap. New line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

htmlWhitespaceSensitivity

有效选项：

• css： 遵守CSS display属性的默认值。
• strict： 空格被认为是敏感的。
• ignore： 空格被认为是不敏感的。

指定 HTML、Vue、Angular 和 Handlebars 的全局空白敏感度。

<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>
1
2
3
4
5
6

vueIndentScriptAndStyle

• Boolean，默认false

是否对vue文件里<script>和<style>块中的代码进行缩进，缩进值为tabWidth

endOfLine

有效选项：

• auto： 维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）
• lf： Line Feed only（\n），在 Linux 和 macOS 以及 git repos 内部很常见
• crlf： 回车符+换行符（\r\n），在 Windows 上很常见
• cr： 仅限回车符（\r），很少使用

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

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

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

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

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

如果想确保 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 文件来实现此目的。
5. 所有操作系统中的所有现代文本编辑器都能够在使用 \n（LF）时正确显示行结尾。但是，旧版本的 Windows 记事本会直观地将这些行压缩成一行。

singleAttributePerLine

• Boolean，默认false

在HTML、Vue、JSX中是否强制限制每行只有一个属性。

embeddedLanguageFormatting

有效选项：

• auto（默认）： 如果 Prettier 可以自动识别，则格式化嵌入代码。
• off： 从不自动格式化嵌入代码。

控制 Prettier 是否格式化嵌入在文件中的引用代码。

当 Prettier 识别出你放置了一些代码的情况时，它知道如何在另一个文件的字符串中格式化，比如在 JavaScript 中带有标记的标记模板或在 Markdown 中的代码块中，它默认会html尝试格式化该代码。

比如说在一个md文件中，

<!-- 下面的代码没有指定类型，prettier会用html去格式化 -->
```
function log() {
  console.log('log');console.log('format')
}
```

<!-- 指定为js，会用js去格式化 -->
```js
function log() {
  console.log('log');console.log('format')
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13

忽略代码

创建并配置.prettierignore文件可以完全忽略（即不需要重新格式化）某些文件和文件夹。

.prettierignore的忽略语法使用的是gitignore语法，具体请查看gitignore语法

在文件中忽略代码

在不需要格式化的代码片段上添加一个行prettier-ignore注释。

prettier-ignore将从格式化中排除抽象语法树中的下一个节点。

// prettier-ignore
function log() {
  console.log('log');console.log('format')
}

// 并不会被格式化成
function log() {
	console.log("log");
	console.log("format");
}
1
2
3
4
5
6
7
8
9
10

与Linters的区别

Linter（例如ESLint）有两类规则：

1. 格式规则（例如max-len、keyword-spacing等等）
2. 代码质量规则（例如no-console、no-alert等）

Prettier是只专注于代码格式化，对代码不做质量检查。

与Linters集成

前面提到了Linters跟Prettier都包含了代码格式化规则，而Linters大多数的格式规则在使用Prettier的时候都是没必要的，同时也可能会与Prettier定义的规则存在冲突。

比如说在代码格式化时采用Perttier规则，而我们代码校验使用的是ESLint，如果同一个规则配置不一致，往往就会出现冲突问题；

例如：字符串单、双引号的配置，eslint --fix后把字符串变成单引号，再次编辑文件后，保存（Prettier）自动格式化后却又变成双引号，导致代码校验异常。

那么解决方案就有如下：

1. 要么修改 .eslintrc.*，要么修改 .prettierrc.* 配置，让它们配置保持一致
2. 使用插件，禁用 ESLint中和Prettier配置有冲突的规则；再使用 Prettier 来替代 ESLint 的格式化功能

关闭ESLint的格式规则

安装eslint-config-prettier插件配置集，把其配置到.eslintrc.*规则的尾部。执行ESLint命令，会禁用那些和Prettier配置有冲突的规则。

安装：

npm i eslint-config-prettier -D
1

在.eslintrc.*文件中配置：

{
  "extends": ["plugin:prettier/recommended"],
}
1
2
3

使用ESLint运行Prettier

安装eslint-plugin-prettier插件，先使用Prettier对代码进行格式化，再并对不一致的地方进行标记；
这两个包配合使用，可以达到运行 eslint --fix 时，采用Prettier的配置规则来格式化文件。

安装：

npm i eslint-plugin-prettier -D
1

在.eslintrc.*文件中添加插件配置

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
1
2
3
4
5
6