How to use Prettier overrides configuration and what are common use cases?

Prettier Overrides Configuration Explained

Prettier's overrides configuration allows setting different formatting rules for different files or directories, which is very useful for multi-language projects or files requiring special formatting.

Basic Syntax

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

File Matching Patterns

1. Single File Extension

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

2. Multiple File Extensions

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

3. Directory Matching

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

4. Complex Matching Patterns

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

Common Use Cases

1. Formatting Rules for Different Languages

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

2. Directory-Specific Formatting

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

3. Special Formatting for Test Files

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

4. Special Handling for Configuration Files

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

Advanced Usage

1. Excluding Specific Files

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

2. Specifying Parsers

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

Configuration Priority

1. File-specific overrides configuration has highest priority
2. Global configuration serves as default values
3. Later defined overrides override earlier defined same configurations

Proper use of overrides allows Prettier to flexibly adapt to different formatting needs in complex projects.