Prettier
By the Prettier open-source project
Prettier is an opinionated code formatter that automatically rewrites source code in languages such as JavaScript, TypeScript, CSS, and HTML into a consistent style, removing the need for teams to debate formatting rules. It works by…
Definition
Prettier is an opinionated code formatter that automatically rewrites source code in languages such as JavaScript, TypeScript, CSS, and HTML into a consistent style, removing the need for teams to debate formatting rules. It works by parsing code into an abstract syntax tree and reprinting it according to a fixed set of formatting decisions, with only a small number of configurable options.
Overview
Prettier was built to end a specific kind of unproductive argument that recurs on nearly every software team: where to put braces, how long a line should be before wrapping, and whether to use tabs or spaces. Rather than trying to satisfy every possible preference through configuration, Prettier takes the position that the specific choice matters far less than having one answer applied uniformly across a codebase, and it deliberately exposes only a small number of settings so that adopting it removes most style debates entirely rather than relocating them into a configuration file. Mechanically, Prettier parses source code into an abstract syntax tree using a language-specific parser, then discards the original formatting completely and reprints the code from that tree according to its own fixed rules for spacing, wrapping, and indentation. Because the output depends only on the AST and not on how the input happened to be formatted, running Prettier on the same code twice always produces identical results, which is what makes it safe to run automatically as part of a save action, pre-commit hook, or CI check without a human needing to review each formatting decision. Prettier is best understood alongside a linter like ESLint rather than as a replacement for one: ESLint analyzes code for correctness and quality issues, such as unused variables or unreachable code, while Prettier only concerns itself with visual formatting. The two tools can overlap on stylistic rules, which is why configurations like eslint-config-prettier exist specifically to disable ESLint's formatting-related rules and avoid the two fighting over the same lines of code. In practice, teams wire Prettier into editors for format-on-save, into pre-commit hooks via tools like husky and lint-staged, and into CI pipelines that reject unformatted pull requests, removing formatting as a topic of discussion in code review entirely. It also formats non-JavaScript files commonly found alongside source code, including CSS, Markdown, JSON, and YAML, extending its consistency guarantee beyond a single language. The main practical friction appears when introducing Prettier into an existing codebase that never had a consistent style: because it reformats entire files rather than making minimal targeted edits, a first run can touch nearly every line, producing a large diff that is typically isolated into its own commit to avoid obscuring unrelated code changes. Teams that want more configurability than Prettier's minimal option set allows, or that already have deeply ingrained house style conventions, sometimes stick with a configurable linter's stylistic rules instead. Teams that value strict determinism and minimal bikeshedding over granular stylistic control tend to find Prettier's tradeoffs worthwhile almost immediately, while teams with unusually strong pre-existing conventions sometimes need a deliberate transition period to adjust to its opinions.
Key Features
- Reformats code deterministically with minimal configuration options
- Supports JavaScript, TypeScript, JSX, CSS, HTML, Markdown, and more
- Integrates with editors for format-on-save workflows
- Runs as a pre-commit hook to enforce consistent style in a repository
- Resolves formatting disputes by removing most stylistic choices
- Works alongside ESLint via plugins that disable conflicting style rules
- Provides a stable, widely adopted default style across the JavaScript ecosystem