Prettier的配置文件


本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/17/Prettier%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/

摘要

本文主要讲述了:

  1. 配置文件格式
  2. package.json
  3. 配置文件格式优先级
  4. 配置文件查询
  5. 配置

正文

配置文件格式

Prettier 的配置文件可以用 4 种文件格式编写:

  1. JavaScript .prettierrc.jsprettier.config.js
  2. JSON .prettierrc.json
  3. YAML .prettierrc.yaml.prettierrc.yml
  4. TOML .prettierrc.toml

示例:

1
2
3
4
5
# .prettierrc or .prettierrc.yaml
trailingComma: 'es5'
tabWidth: 4
semi: false
singleQuote: true

package.json

除此之外,配置还可以写在package.jsonprettier字段里。

配置文件格式优先级

当同一个目录下有多个不同格式的配置文件时,Prettier 只会使用一个。Prettier 会按照以下优先级(从高到低)读取:

  1. package.json
  2. .prettierrc YAML 或 JSON 格式
  3. .prettierrc.json
  4. .prettierrc.yaml
  5. .prettierrc.yml
  6. .prettierrc.js
  7. .prettier.config.js
  8. .prettierrc.toml

配置文件查询

默认情况下,Prettier 会从文件所在目录开始并逐级向上寻找配置文件。

直到找到一个配置文件或已经到达根目录时,才会停止。

配置

如果项目根目录下存在.editorconfig,那么默认情况下,Prettier 在解析配置文件的时候,也会解析.editorconfig

.editorconfig的优先级比 Prettier 配置的优先级低。只有当 Prettier 中缺省对应的配置项时,才会使用.editorconfig中的配置项

printWidth

列宽,缺省值为80

tabWidth

缩进宽度,缺省值为2

useTabs

是否使用 tab 缩进,缺省值为false

semi

是否使用分号,缺省值为true

singleQuote

是否使用单引号包裹字符串,缺省值为false

quoteProps

是否使用引号包裹对象的键名,缺省值为as-needed

  • as-needed 当且仅当对象中特定键名需要被引号包裹时,使用引号包裹特定键名
  • consistent 如果对象中至少存在一个键名必须被引号包裹时,使用引号包裹所有键名
  • preserve 不做任何特殊处理

trailingComma

多行时使用尾后逗号,缺省值为es5

  • none 不使用
  • es5 仅使用多行数组尾后逗号和多行对象尾后逗号
  • all 尽可能多地使用尾后逗号,在es5的基础上,还在函数的参数列表中使用尾后逗号

bracketSpacing

是否在对象的字面量形式的两个花括号的内侧使用空格作为间隔,缺省值为true

  • true 使用
  • false 不使用

arrowParens

是否使用括号包裹箭头函数的参数,缺省值为always

  • avoid 尽可能省略
  • always 总是使用

rangeStart

设定格式化范围的起点,缺省值为0

rangeEnd

设定格式化范围的终点,缺省值为无穷大。

注意:.inf即 YAML 中的无穷大。

requirePragma

是否只格式化那些文件顶部有 Pragma 指令(一种特殊注释)的文件,缺省值为false

insertPragma

格式化完成后,是否在文件顶部插入 Pragma 指令(一种特殊注释),缺省值为false

proseWrap

markdown 文件是否折行

  • always 总是折行
  • never 不折行
  • preserve 不处理(缺省值)

htmlWhitespaceSensitivity

是否使用空白字符格式化 HTML 文件

  • css 按照 CSS 的display属性,块元素格式化,内联元素不格式化(缺省值)
  • strict 都不格式化
  • ignore 都格式化

endOfLine

行尾符

  • auto 不处理
  • lf 换行符 Linux 或 macOS(缺省值)
  • crlf 回车符+换行符 Windows
  • cr 回车符

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/17/Prettier%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/


本文对你有帮助?请支持我


支付宝
微信