Prettier 的 overrides 配置如何使用?有哪些常见场景?

Prettier 的 overrides 配置详解

Prettier 的 overrides 配置允许为不同的文件或目录设置不同的格式化规则,这对于多语言项目或需要特殊格式化的文件非常有用。

基本语法

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

文件匹配模式

1. 单一文件扩展名

json
{
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

2. 多个文件扩展名

json
{
  "overrides": [
    {
      "files": ["*.css", "*.scss", "*.less"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

3. 目录匹配

json
{
  "overrides": [
    {
      "files": "src/styles/**/*",
      "options": {
        "printWidth": 120
      }
    }
  ]
}

4. 复杂匹配模式

json
{
  "overrides": [
    {
      "files": ["**/*.test.js", "**/*.spec.js"],
      "options": {
        "printWidth": 100
      }
    }
  ]
}

常见使用场景

1. 不同语言的格式化规则

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

2. 特定目录的格式化

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

3. 测试文件的特殊格式化

json
{
  "overrides": [
    {
      "files": ["**/*.test.js", "**/*.spec.js", "**/__tests__/**/*"],
      "options": {
        "printWidth": 100,
        "trailingComma": "all"
      }
    }
  ]
}

4. 配置文件的特殊处理

json
{
  "overrides": [
    {
      "files": [".prettierrc", ".eslintrc", "package.json"],
      "options": {
        "tabWidth": 2
      }
    }
  ]
}

高级用法

1. 排除特定文件

json
{
  "overrides": [
    {
      "files": ["**/*.js", "!**/*.min.js"],
      "options": {
        "printWidth": 80
      }
    }
  ]
}

2. 指定解析器

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

配置优先级

1. 文件特定的 overrides 配置优先级最高
2. 全局配置作为默认值
3. 后定义的 overrides 会覆盖先定义的相同配置

合理使用 overrides 可以让 Prettier 在复杂项目中灵活适应不同的格式化需求。