Prettier — Opinionated Code Formatter for Consistent Style

Introduction

Prettier is an opinionated code formatter that takes your code and reprints it from scratch according to consistent rules. Unlike linters that flag issues for you to fix, Prettier automatically rewrites your code — ending all debates about code style in your team.

With over 52,000 GitHub stars, Prettier has become the industry standard for code formatting in JavaScript, TypeScript, and web development. It integrates with virtually every editor, CI system, and development workflow.

What Prettier Does

Prettier parses your code into an Abstract Syntax Tree (AST), then reprints it using its own rules for line length, indentation, and formatting. This means it completely ignores your original formatting and produces deterministic output — the same code always produces the same result regardless of how it was originally written.

Architecture Overview

[Source Code] --> [Parser]
                    |
              [AST (Abstract Syntax Tree)]
                    |
              [Prettier IR (Intermediate Representation)]
                    |
              [Printer / Layout Algorithm]
                    |
              [Formatted Output]

Supported Parsers:
  babel, typescript, css, html,
  markdown, graphql, yaml, and more

Self-Hosting & Configuration

// .prettierrc — minimal configuration
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

# Pre-commit hook with husky + lint-staged
npm install -D husky lint-staged
npx husky init

# package.json
# "lint-staged": {
#   "*.{js,ts,css,md}": "prettier --write"
# }

Key Features

• Opinionated — minimal config options means no debates about style
• Multi-Language — supports JS, TS, CSS, HTML, JSON, GraphQL, Markdown, YAML, and more
• Editor Integration — plugins for VS Code, IntelliJ, Vim, Emacs, and others
• Git Hook Ready — integrates with husky and lint-staged for pre-commit formatting
• CI Integration — use --check flag to enforce formatting in CI pipelines
• Plugin System — community plugins for PHP, Java, Ruby, Swift, and many more
• Deterministic — same input always produces same output regardless of original formatting
• Range Formatting — format only selected portions of a file

Comparison with Similar Tools

FAQ

Q: Should I use Prettier with ESLint? A: Yes, but disable ESLint formatting rules to avoid conflicts. Use eslint-config-prettier to turn off conflicting rules, and let Prettier handle formatting while ESLint handles code quality.

Q: Can I customize Prettier formatting rules? A: Prettier intentionally offers very few options. This is by design — the fewer choices, the less to debate. If you need extensive customization, consider dprint or Biome.

Q: How do I adopt Prettier in an existing large codebase? A: Run "npx prettier --write ." once to format everything, commit it as a single "style: apply prettier" commit, then add a pre-commit hook to enforce it going forward.

Q: Does Prettier slow down my editor? A: Prettier is fast enough for format-on-save in most editors. For very large files (10,000+ lines), you may want to use range formatting instead of whole-file formatting.

Sources

• GitHub: https://github.com/prettier/prettier
• Documentation: https://prettier.io
• Created by James Long
• License: MIT