Frontend Patterns

Pattern

Code Formatting

Format code automatically to eliminate style debates and merge conflicts.

Code Formatting

Problem

Code style is inconsistent across the codebase, causing merge conflicts and wasted time in code reviews debating formatting. Different developers use different indentation, quote styles, or bracket placement, making diffs noisy and harder to review for meaningful changes.

Solution

Configure an automated formatter that runs on save or commit to enforce consistent style across the codebase. This eliminates style discussions entirely and makes diffs show only meaningful changes.

Example

This example shows a Prettier configuration file that defines consistent formatting rules for your codebase.

// .prettierrc - Prettier configuration
{
  "semi": true,              // Require semicolons at end of statements
  "singleQuote": true,       // Use single quotes instead of double quotes
  "tabWidth": 2,             // Set indentation to 2 spaces
  "trailingComma": "es5"     // Add trailing commas where valid in ES5
}

Benefits

  • Eliminates code style debates and bike-shedding in code reviews.
  • Reduces merge conflicts caused by inconsistent formatting.
  • Makes diffs cleaner by showing only meaningful code changes.
  • Saves time by automating style decisions and enforcement.
  • Creates consistent code style across the entire team and codebase.

Tradeoffs

  • Some developers may disagree with the opinionated formatting choices.
  • Can create large diffs when first introducing formatting to existing codebases.
  • May occasionally format code in ways that reduce readability for specific cases.
  • Requires editor integration and team discipline to run consistently.
  • Can slow down save operations slightly when formatting on save.
Stay Updated

Get New Patterns
in Your Inbox

Join thousands of developers receiving weekly insights on frontend architecture patterns

No spam. Unsubscribe anytime.