配置文件 · Prettier 中文网

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

¥You can configure Prettier via (in order of precedence):

你的 package.json 或 package.yaml 文件中的 "prettier" 键。

¥A "prettier" key in your package.json, or package.yaml file.
以 JSON 或 YAML 编写的 .prettierrc 文件。

¥A .prettierrc file written in JSON or YAML.
.prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5 文件。

¥A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
使用 export default 或 module.exports 导出对象的 .prettierrc.js 或 prettier.config.js 文件（取决于 package.json 中的 type 值）。

¥A .prettierrc.js, or prettier.config.js file that exports an object using export default or module.exports (depends on the type value in your package.json).
使用 export default 导出对象的 .prettierrc.mjs 或 prettier.config.mjs 文件。

¥A .prettierrc.mjs, or prettier.config.mjs file that exports an object using export default.
使用 module.exports 导出对象的 .prettierrc.cjs 或 prettier.config.cjs 文件。

¥A .prettierrc.cjs, or prettier.config.cjs file that exports an object using module.exports.
一个 .prettierrc.toml 文件。

¥A .prettierrc.toml file.

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

¥The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.

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

¥Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.

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

¥The options you can use in the configuration file are the same as the API options.

基本配置

¥Basic Configuration

JSON：

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

JS (ES 模块):

¥JS (ES Modules):

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

/**

 * @see https://prettier.nodejs.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.nodejs.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

配置覆盖

¥Configuration Overrides

覆盖让你对某些文件扩展名、文件夹和特定文件有不同的配置。

¥Overrides let you have different configuration for certain file extensions, folders and specific files.

Prettier 借用了 ESLint 的覆盖格式。

¥Prettier borrows ESLint’s override format.

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 可以选择性地提供以排除给定规则的文件，也可以是字符串或字符串数组。

¥files is required for each override, and may be a string or array of strings. excludeFiles may be optionally provided to exclude files for a given rule, and may also be a string or array of strings.

设置 parser 选项

¥Setting the parser option

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

¥By default, Prettier automatically infers which parser to use based on the input file extension. Combined with overrides you can teach Prettier how to parse files it does not recognize.

例如，让 Prettier 格式化自己的 .prettierrc 文件，你可以这样做：

¥For example, to get Prettier to format its own .prettierrc file, you can do:

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

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

¥You can also switch to the flow parser instead of the default babel for .js files:

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

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

¥Note: Never put the parser option at the top level of your configuration. Only use it inside overrides. Otherwise you effectively disable Prettier’s automatic file extension based parser inference. This forces Prettier to use the parser you specified for all types of files – even when it doesn’t make sense, such as trying to parse a CSS file as JavaScript.

配置架构

¥Configuration Schema

如果你想要一个 JSON 模式来验证你的配置，可以在此处找到：https://json.schemastore.org/prettierrc。

¥If you’d like a JSON schema to validate your configuration, one is available here: https://json.schemastore.org/prettierrc.

EditorConfig

如果你的项目中有一个 .editorconfig 档，Prettier 将解析它并将其属性转换为相应的 Prettier 配置。此配置将被 .prettierrc 等覆盖。

¥If a .editorconfig file is in your project, Prettier will parse it and convert its properties to the corresponding Prettier configuration. This configuration will be overridden by .prettierrc, etc.

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

¥Here’s an annotated description of how different properties map to Prettier’s behavior:

# 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 文件：

¥Here’s a copy+paste-ready .editorconfig file if you use the default options:

[*]
charset = utf-8
insert_final_newline = true
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 80