Prettier: AI-Optimized Technical Reference

Core Technology Overview

Prettier is an opinionated code formatter that enforces consistent style by parsing code into an Abstract Syntax Tree (AST) and reprinting it with fixed formatting rules.

• Latest Version: 3.6 (June 23, 2025)
• Language Support: 15+ languages (JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML)
• Market Dominance: 83% developer adoption, 9.8M+ GitHub repositories, 19.8k+ npm packages
• Industry Usage: Facebook (React codebase), Airbnb, Netflix, Shopify

Configuration

Production-Ready Settings

{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

Critical Configuration Rules

• Print Width: Default 80 breaks React JSX - use 120 minimum
• Trailing Commas: Use "all" for cleaner Git diffs
• Limited Options: Only 8 configuration options total (intentional design)
• No Customization: Cannot modify formatting behavior beyond basic options

Installation Requirements

# REQUIRED: Use --save-exact flag
npm install --save-dev --save-exact prettier

# CRITICAL: Version conflicts common between minor releases
# Prettier semantic versioning occasionally breaks formatting

Performance Characteristics

Version 3.6+ Performance Improvements

• 10x speed improvement with --experimental-cli (no longer experimental)
• Rust-based OXC parser: 25x faster than default parser via @prettier/plugin-oxc
• Real-world benchmarks (M3 MacBook Pro):
  • Small projects (1-50 files): 0.8s → 0.1s
  • Medium projects (100-500 files): 5.2s → 0.6s
  • Large monorepos (1000+ files): 45s → 4.1s

Performance vs Competitors

Tool	Speed	Language Support	Production Ready
Prettier 3.6+	Fast	15+ languages	Battle-tested
Biome	25x faster	JS/TS/CSS/JSON	Rapidly maturing
ESLint Formatting	Slow	JS/TS only	Deprecated approach
dprint	Rust-fast	20+ languages	Niche adoption

Critical Failure Modes

Syntax Error Handling

• BREAKS ON: Invalid syntax, unclosed braces, mixed ES6/CommonJS imports
• NO RECOVERY: Will not format syntactically invalid code
• ERROR MESSAGE: "SyntaxError: Unexpected token" indicates broken code, not Prettier issue

Version Compatibility Issues

• Breaking Changes: Minor version updates can reformat entire codebase
• Migration Risk: v3.2 reformatted differently than v3.1 (2,000 files affected)
• Solution: Always use --save-exact flag in package.json

Large Codebase Integration

• DON'T: Format entire legacy codebase at once (creates unreviewable 50k+ line PRs)
• DO: Use .prettierignore for legacy files, pretty-quick for changed files only
• TIMELINE: Expect 6-month migration for large codebases

Editor Integration Requirements

VS Code (28M+ installs)

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

Critical Editor Setup Rules

• Format-on-save MANDATORY: Manual formatting defeats the purpose
• Vim Warning: Don't use vim-prettier (abandoned, breaks on Node 18+)
• Plugin Conflicts: Install eslint-config-prettier to prevent ESLint conflicts

Operational Intelligence

What Works in Production

• Enterprise Adoption: Facebook uses across React core, Shopify deployed to 500+ engineers
• CI Integration: prettier --check . exits with code 1 for unformatted files
• Legacy Migration: Use pretty-quick and lint-staged for gradual adoption

Common Misconceptions

• NOT a linter: Prettier formats, ESLint finds bugs - you need both
• NOT customizable: 8 options total, no "format my way" options
• NOT optional: 83% adoption means it's industry standard

Resource Requirements

• Setup Time: 15 minutes for new project, 6 months for legacy migration
• Bundle Size: 2.3MB (chunky but acceptable)
• Memory Usage: Moderate, scales with project size

Breaking Points

• UI Performance: Breaks at 1000+ spans (makes debugging distributed transactions impossible)
• File Size: Large files (10k+ lines) slow significantly
• Plugin Stability: Community plugins can break imports/side effects

Ecosystem Dependencies

Essential Plugins (Production-Tested)

• prettier-plugin-organize-imports: 2.8M weekly downloads, sorts TypeScript imports
• prettier-plugin-tailwindcss: Tailwind CSS class sorting, eliminates bikeshedding
• @prettier/plugin-oxc: Rust-based parser, 25x performance improvement

Plugin Warnings

• Test thoroughly: Plugins can reorder imports breaking side effects
• Pin versions: Plugin compatibility breaks between Prettier releases
• Check compatibility matrix: Not all plugins support latest Prettier versions

Decision Support Information

When to Choose Prettier

• Team > 3 developers: Eliminates formatting debates (14% of developer time saved)
• Multi-language projects: Single tool for JS/TS/CSS/HTML/JSON/Markdown
• CI/CD integration: Automated formatting enforcement prevents inconsistent code

When NOT to Choose Prettier

• Single developer projects: Overhead may outweigh benefits
• Legacy Java/C++ codebases: Limited language support
• Extreme performance requirements: Biome is 25x faster for JS/TS projects

Migration Cost-Benefit

• Upfront Cost: 6 months for large legacy codebases
• Ongoing Benefit: Zero time spent on formatting debates, cleaner Git diffs
• Risk Mitigation: Use .prettierignore and gradual rollout strategy

Critical Warnings

What Documentation Doesn't Tell You

• Global installs break: Version conflicts inevitable across projects
• Plugin ecosystem fragile: Many abandoned or incompatible plugins
• CI setup critical: Unformatted code will slip through without --check in CI

Production Gotchas

• Node.js version sensitivity: Some plugins break on newer Node versions
• Bundle size impact: 2.3MB affects build times
• Git blame pollution: Mass formatting commits obscure actual changes

Technical Support Quality

• Community: Active Discord server, responsive maintainers
• Documentation: Comprehensive but sometimes lacks edge case coverage
• Issue Resolution: GitHub issues actively maintained, good response time
• Stack Overflow: Large knowledge base for troubleshooting