Prettier Code Formatter Cheat Sheet

Back to Developer ToolsUpdated 2026-05-16

Prettier is an opinionated code formatter that enforces a consistent style by parsing code and re-printing it with its own rules. It removes the need for manual formatting debates by automatically formatting code on save, supporting JavaScript, TypeScript, CSS, HTML, JSON, Markdown, and many other languages. The core philosophy is minimizing configuration options (printWidth, tabWidth, quote style) to eliminate bikeshedding while maximizing consistency across teams. Prettier integrates seamlessly with ESLint using eslint-config-prettier, runs via CLI or programmatically through its Node.js API, and can enforce formatting through pre-commit hooks with Husky and lint-staged or in CI/CD pipelines.

What This Cheat Sheet Covers

This topic spans 15 focused tables and 112 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Configuration Options - Core FormattingTable 2: Configuration Options - Special BehaviorsTable 3: Configuration File Formats and LocationsTable 4: CLI Commands and UsageTable 5: Language and Parser SupportTable 6: Plugin System and Popular PluginsTable 7: Editor IntegrationTable 8: Pre-commit Hooks with Husky and lint-stagedTable 9: Ignore Patterns and File HandlingTable 10: ESLint IntegrationTable 11: Prettier vs Biome ComparisonTable 12: CI/CD EnforcementTable 13: API and Programmatic UsageTable 14: Debugging and TroubleshootingTable 15: Performance and Advanced Features

Table 1: Configuration Options - Core Formatting

Option	Example	Description
printWidth	`"printWidth": 80`	Maximum line length before wrapping; default 80 characters • Not a hard limit — Prettier uses heuristics and may create longer/shorter lines for readability.
tabWidth	`"tabWidth": 2`	Number of spaces per indentation level; default 2 • Can be overridden by `.editorconfig` `indent_size` or `tab_width` if present.
useTabs	`"useTabs": false`	Use tabs instead of spaces for indentation; default `false` (uses spaces) • When `true`, `tabWidth` defines visual tab width.
semi	`"semi": true`	Add semicolons at end of statements; default `true` • Set to `false` to only add semicolons where syntactically required.
singleQuote	`"singleQuote": false`	Use single quotes instead of double quotes; default `false` (double) • Doesn't affect JSX — use `jsxSingleQuote` for that • Prettier chooses whichever results in fewer escapes.
jsxSingleQuote	`"jsxSingleQuote": false`	Use single quotes in JSX/TSX attributes; default `false` (double) • Separate from `singleQuote` option.

Table 1: Configuration Options - Core Formatting

Option	Example	Description
printWidth	`"printWidth": 80`	Maximum line length before wrapping; default 80 characters • Not a hard limit — Prettier uses heuristics and may create longer/shorter lines for readability.
tabWidth	`"tabWidth": 2`	Number of spaces per indentation level; default 2 • Can be overridden by `.editorconfig` `indent_size` or `tab_width` if present.
useTabs	`"useTabs": false`	Use tabs instead of spaces for indentation; default `false` (uses spaces) • When `true`, `tabWidth` defines visual tab width.
semi	`"semi": true`	Add semicolons at end of statements; default `true` • Set to `false` to only add semicolons where syntactically required.
singleQuote	`"singleQuote": false`	Use single quotes instead of double quotes; default `false` (double) • Doesn't affect JSX — use `jsxSingleQuote` for that • Prettier chooses whichever results in fewer escapes.
jsxSingleQuote	`"jsxSingleQuote": false`	Use single quotes in JSX/TSX attributes; default `false` (double) • Separate from `singleQuote` option.