Prettier常见配置

Prettier作为目前最主流的代码格式化工具，已经支持了各主流编辑器和前端框架。本文简单整理prettier配置项，以便后续使用查询。

prettier工具等使用不在本文介绍，可在官网中查询

本人常用配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// prettier.config.js

/**
 * @type {import('prettier').Config}
 */
module.exports = {
  printWidth: 100,  // 单行长度，超出将换行，默认为80
  tabWidth: 2,  // 缩进字符长度（空格数），默认为2
  useTabs: false,  // 使用tab而不是空格缩进行，默认为false
  singleQuote: true,  // 使用单引号而不是双引号，默认为false
  semi: true,  // 句末是否使用分号，默认为true
  trailingComma: 'es5',  // 多行时尽可能打印尾随逗号，"all" - 尽可能在尾随逗号、"es5" - 在 ES5 中有效的尾随逗号（对象、数组等）、"none" - 没有尾随逗号。v3.0.0 中默认值从 es5 更改为 all
  bracketSpacing: true,  // 在对象前后添加空格，默认为true。eg: { foo: bar }
  arrowParens: 'avoid',  // 单参数箭头函数参数周围使用圆括号，"always" - 始终包括父级、"avoid" - 尽可能省略括号，默认为"always"。eg: (x) => x
  endOfLine: 'auto',  // 结束行形式,"lf" – 仅换行 (\n)、"crlf" - 回车 + 换行字符 (\r\n)、"cr" - 仅回车字符 (\r)、"auto" - 维护现有的行结尾。v2.0.0 以来的默认值为"lf"
};

配置文件

  • package.json 文件中的 "prettier" 配置。
  • 以 JSON 或 YAML 编写的 .prettierrc 文件、
    .prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5 文件。
  • 使用 export default 或 module.exports 导出对象的 .prettierrc.js 或 prettier.config.js 文件（取决于 package.json 中的 type 值）。
  • 使用 export default 导出对象的 .prettierrc.mjs 或 prettier.config.mjs 文件。
  • 使用 module.exports 导出对象的 .prettierrc.cjs 或 prettier.config.cjs 文件。
    一个 .prettierrc.toml 文件。

个人相对推荐.prettierrc.js或prettier.config.js形式，比较灵活。

配置字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  printWidth: 100, // 单行长度,超出将换行,默认为80
  tabWidth: 2, // 缩进字符长度(空格数),默认为2
  useTabs: false, // 使用tab而不是空格缩进行,默认为false
  singleQuote: true, // 使用单引号而不是双引号,默认为false
  semi: true, // 句末是否使用分号,默认为true
  trailingComma: 'es5', // 多行时尽可能打印尾随逗号,"all" - 尽可能在尾随逗号、"es5" - 在 ES5 中有效的尾随逗号(对象、数组等)、"none" - 没有尾随逗号。v3.0.0 中默认值从 es5 更改为 all
  bracketSpacing: true, // 在对象前后添加空格,默认为true。eg: { foo: bar }
  arrowParens: 'avoid', // 单参数箭头函数参数周围使用圆括号,"always" - 始终包括父级、"avoid" - 尽可能省略括号,默认为"always"。eg: (x) => x
  endOfLine: 'auto', // 结束行形式,"lf" – 仅换行 (\n)、"crlf" - 回车 + 换行字符 (\r\n)、"cr" - 仅回车字符 (\r)、"auto" - 维护现有的行结尾。v2.0.0 以来的默认值为"lf"
  jsxSingleQuote: false, // jsx 中使用单引号而不是双引号,默认为false
  quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号,默认为 'as-needed'
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行,默认为false
  htmlWhitespaceSensitivity: 'strict', // 指定HTML全局空白敏感度, "css" - 遵守CSS display属性的默认值、 "strict" - 空格被认为是敏感的、 "ignore" - 空格被认为是不敏感的
  vueIndentScriptAndStyle: false, // 在.vue文件中的script和style标签内缩进,默认为false
};

表格形式：

字段 类型 默认值 说明
printWidth number 80 单行长度,超出将换行
tabWidth number 2 缩进长度
useTabs boolean false 使用空格或tab缩进
semi boolean true 语句末尾添加分号
singleQuote boolean false 使用单引号或双引号
quoteProps 'as-needed'/'consistent'/'preserve' ‘as-needed’ 对象属性添加引号规则
jsxSingleQuote boolean false jsx中使用单引号或双引号
trailingComma 'none'/'es5'/'all' ‘es5’ 多行时末尾逗号
bracketSpacing boolean true 对象括号间空格
jsxBracketSameLine boolean false jsx标签闭合放行
arrowParens 'always'/'avoid' ‘always’ 箭头函数参数括号
rangeStart number 0 格式化部分代码开始位置
rangeEnd number Infinity 格式化部分代码结束位置
parser 'babel'/'flow'/'typescript'等 根据文件类型推断 指定解析器
htmlWhitespaceSensitivity 'css'/'strict'/'ignore' ‘css’ html全局空白敏感度
endOfLine 'lf'/'crlf'/'cr'/'auto' ‘lf’ 换行类型
embeddedLanguageFormatting 'auto' ‘auto’ 嵌入代码格式化

相关链接