乐闻世界logo
5月27日 22:01

Prettier overrides 配置怎么用？常见场景有哪些？

核心答案

Prettier 的 overrides 允许为不同文件或目录设置差异化的格式化规则，核心语法是在配置文件中添加 overrides 数组，每项包含 files（匹配模式）和 options（覆盖选项）：

json
{
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": ["*.css", "*.scss"],
      "options": { "singleQuote": false }
    },
    {
      "files": "*.json",
      "options": { "tabWidth": 4 }
    }
  ]
}

文件匹配模式

  • 单扩展名: "*.json" — 匹配所有 JSON 文件
  • 多扩展名: ["*.css", "*.scss", "*.less"] — 数组形式匹配多种文件
  • 目录匹配: "src/styles/**/*" — 按路径前缀限定范围
  • 排除文件: ["**/*.js", "!**/*.min.js"] — 用 ! 前缀排除，等价于 excludeFiles 字段

常见场景

不同语言差异化规则 — CSS 用双引号，JS 用单引号，Markdown 保留换行：

json
{
  "overrides": [
    { "files": "*.css", "options": { "singleQuote": false } },
    { "files": "*.md",  "options": { "proseWrap": "preserve" } }
  ]
}

新老代码共存 — legacy 目录保留旧格式，新代码用新规则：

json
{
  "overrides": [
    { "files": "legacy/**/*", "options": { "tabWidth": 4, "useTabs": true } },
    { "files": "src/**/*",     "options": { "tabWidth": 2 } }
  ]
}

指定解析器 — parser 只能写在 overrides 内，不要放顶层：

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

优先级规则

  1. overrides 中匹配到的配置优先级高于全局配置
  2. 多条 override 都匹配时，后面的覆盖前面的相同选项
  3. .editorconfig 的值会被 .prettierrc 和 overrides 依次覆盖

面试追问

  • overrides 和 .editorconfig 谁优先？ — overrides 优先。Prettier 先读 .editorconfig 作为基础，再被 .prettierrc 和 overrides 层层覆盖。
  • parser 能放顶层吗？ — 不要。顶层 parser 会覆盖 Prettier 基于扩展名的自动推断，只在 overrides 中为特殊文件指定。
  • overrides 匹配不到文件会报错吗？ — 不会，未匹配的 override 静默忽略，不影响其他配置。
标签：Prettier