Prettier

Prettier 是一个代码格式化工具，主要用于自动格式化代码，使其风格一致。它支持多种编程语言，如 JavaScript、TypeScript、CSS、HTML、JSON 等。通过 Prettier，开发者可以避免手动调整代码格式，节省时间并减少风格争议

https://prettier.io/ (opens new window)

# Prettier 参数配置

# 1.常用配置参数

配置项	类型	默认值	说明
printWidth	number	80	每行的最大字符数。超过此值会换行。
tabWidth	number	2	缩进的空格数。
useTabs	boolean	false	是否使用 Tab 缩进。true 表示使用 Tab，false 表示使用空格。
semi	boolean	true	是否在语句末尾添加分号。true 表示添加，false 表示不添加。
singleQuote	boolean	false	是否使用单引号。true 表示使用单引号，false 表示使用双引号。
quoteProps	string	"as-needed"	对象属性的引号方式。可选值："as-needed"（按需）、"consistent"（一致）、"preserve"（保留）。
jsxSingleQuote	boolean	false	在 JSX 中是否使用单引号。true 表示使用单引号。
trailingComma	string	"es5"	是否在多行结构的最后一行添加逗号。可选值："none"、"es5"、"all"。
bracketSpacing	boolean	true	是否在对象字面量的括号之间添加空格。true 表示添加。
bracketSameLine	boolean	false	是否将多行 HTML/JSX 元素的 > 放在最后一行的末尾。true 表示放在末尾。
arrowParens	string	"always"	箭头函数参数的括号方式。可选值："always"（始终添加）、"avoid"（避免添加）。
proseWrap	string	"preserve"	是否对 Markdown 文本进行换行。可选值："always"、"never"、"preserve"。
htmlWhitespaceSensitivity	string	"css"	HTML 空白敏感度。可选值："css"、"strict"、"ignore"。
endOfLine	string	"lf"	换行符类型。可选值："lf"（Linux）、"crlf"（Windows）、`"cr"

# 2.配置文件

# JSON 格式（.prettierrc）

{
  "printWidth": 100,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

1
2
3
4
5
6
7
8
9
10
11

# JavaScript 格式（.prettierrc.js）

module.exports = {
  printWidth: 100,
  tabWidth: 4,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: "es5",
  bracketSpacing: true,
  arrowParens: "always",
  endOfLine: "lf",
};

1
2
3
4
5
6
7
8
9
10
11

# YAML 格式（.prettierrc.yml）

printWidth: 100
tabWidth: 4
useTabs: false
semi: true
singleQuote: true
trailingComma: es5
bracketSpacing: true
arrowParens: always
endOfLine: lf

1
2
3
4
5
6
7
8
9

# TOML 格式（.prettierrc.toml）

printWidth = 100
tabWidth = 4
useTabs = false
semi = true
singleQuote = true
trailingComma = "es5"
bracketSpacing = true
arrowParens = "always"
endOfLine = "lf"

1
2
3
4
5
6
7
8
9

提示

Prettier 会按照以下优先级加载配置文件：

命令行指定的配置文件。
项目中的配置文件（如 .prettierrc、.prettierrc.json、.prettierrc.yml 等）。
package.json 中的 prettier 字段
如果没有找到配置文件，Prettier 会使用默认配置

上次更新: 2025/02/27, 19:02:07

← webpack Chrome→