稳定版

编辑

配置文件

您可以通过以下方式配置 Prettier（按优先级顺序）：

  • 在您的 package.json 或 package.yaml 文件中使用 "prettier" 键。
  • 使用 JSON 或 YAML 格式的 .prettierrc 文件。
  • 使用 .prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5 文件。
  • 使用 .prettierrc.js 或 prettier.config.js 文件，该文件使用 export default 或 module.exports 导出对象（取决于您 package.json 中的 type 值）。
  • 使用 .prettierrc.mjs 或 prettier.config.mjs 文件，该文件使用 export default 导出对象。
  • 使用 .prettierrc.cjs 或 prettier.config.cjs 文件，该文件使用 module.exports 导出对象。
  • 使用 .prettierrc.toml 文件。

配置文件将从要格式化的文件所在位置开始解析，并向上搜索文件树，直到找到（或未找到）配置文件。

Prettier 故意不支持任何类型的全局配置。这是为了确保当项目复制到另一台计算机时，Prettier 的行为保持不变。否则，Prettier 将无法保证团队中的每个人都能获得相同的一致结果。

您可以在配置文件中使用的选项与 API 选项 相同。

基本配置

JSON

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

JS（ES 模块）

// prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs

/**
 * @see https://prettier.node.org.cn/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

export default config;

JS（CommonJS）

// prettier.config.js, .prettierrc.js, prettier.config.cjs, or .prettierrc.cjs

/**
 * @see https://prettier.node.org.cn/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

module.exports = config;

YAML

# .prettierrc or .prettierrc.yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

TOML

# .prettierrc.toml
trailingComma = "es5"
tabWidth = 4
semi = false
singleQuote = true

配置覆盖

覆盖允许您为某些文件扩展名、文件夹和特定文件设置不同的配置。

Prettier 借鉴了 ESLint 的 覆盖格式。

JSON

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

YAML

semi: false
overrides:
  - files: "*.test.js"
    options:
      semi: true
  - files:
      - "*.html"
      - "legacy/**/*.js"
    options:
      tabWidth: 4

每个覆盖都需要 files，它可以是字符串或字符串数组。可以根据需要提供 excludeFiles 来排除特定规则的文件，它也可以是字符串或字符串数组。

设置 parser 选项

默认情况下，Prettier 会根据输入文件的扩展名自动推断要使用的解析器。结合 overrides，您可以教会 Prettier 如何解析它无法识别的文件。

例如，要让 Prettier 格式化它自己的 .prettierrc 文件，您可以执行以下操作

{
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

您还可以切换到 flow 解析器，而不是 .js 文件的默认 babel 解析器

{
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "parser": "flow"
      }
    }
  ]
}

注意：切勿将 parser 选项放在配置的顶层。仅在 overrides 中使用它。否则，您实际上会禁用 Prettier 基于文件扩展名的自动解析器推断。这会强制 Prettier 对所有类型的文件使用您指定的解析器，即使在没有意义的情况下也是如此，例如尝试将 CSS 文件作为 JavaScript 解析。

配置模式

如果您希望使用 JSON 模式来验证您的配置，则可以在这里找到一个：https://json.schemastore.org/prettierrc。

EditorConfig

如果您的项目中存在 .editorconfig 文件，Prettier 将解析它并将它的属性转换为相应的 Prettier 配置。此配置将被 .prettierrc 等覆盖。

以下是不同属性如何映射到 Prettier 行为的注释说明

# Stop the editor from looking for .editorconfig files in the parent directories
# root = true

[*]
# Non-configurable Prettier behaviors
charset = utf-8
insert_final_newline = true
# Caveat: Prettier won’t trim trailing whitespace inside template strings, but your editor might.
# trim_trailing_whitespace = true

# Configurable Prettier behaviors
# (change these if your Prettier config differs)
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 80

如果您使用默认选项，则以下是一个可复制粘贴的 .editorconfig 文件

[*]
charset = utf-8
insert_final_newline = true
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 80
← 选项共享配置 →