Format TypeScript with Prettier
Reformat TS with the same parser the Prettier CLI uses. Handles generics, conditional types, decorators, and overloads. Runs locally.
Loading parser…
How to format TypeScript
Prettier's TS parser reads modern TypeScript including generics, satisfies, and template literal types — then reprints with consistent style.
- 01
Paste TS source
Includes types, generics, decorators, and module syntax.
Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.
tsPrettierASTstandalonelazyinput · sourceraw · ASTtype X<T>=T
loaded · parsedAST · ready - 02
Pick style options
Quotes, semicolons, indent, wrap — same flags Prettier exposes elsewhere.
Indent width, tab style, and print-width re-format through a memoised pass — switching
2 → 4spaces never re-parses, only re-prints.optionsindentprint-widthmemoisedliveopts · optionsstyle · livesemi=true
options applied · livelive - 03
Live reformat
Conditional types align, parameter lists break correctly, type guards stay readable.
The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.
liveidempotentdeterministicdiff-cleanstableout · formattedpretty · readytype X<T> = T;
formatted · liveidempotent - 04
Copy or download
Grab the .ts file or copy the source — input stays in the browser.
Download writes a
Blobwith the language-appropriate extension; copy usesnavigator.clipboard.writeTextso the output preserves all whitespace exactly.exportclipboardbloblanguage MIMEclient-sideok · copiedready · done✓ Copied
shipped · ready to shipsuccess
Formatting tips that keep diffs sane
Pick one config and pin it
Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.
Format on save
Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.
Idempotency matters
Running the formatter twice should produce identical output. Test this on a representative file.
Match the language community
Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.
Print-width drives wrapping
80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.
Don’t mix formatters and linters
Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.
When to format TypeScript
Snippets, generated DTOs, type playgrounds.
Snippet cleanup
Format snippets copied from issues, gists, or AI output. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.
idempotentGenerated DTOs
Pretty-print openapi-typescript or zod output. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.
CI-readyType playground
Make a long conditional type readable before sharing. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.
diff-cleanCode reviews
Strip whitespace churn so diffs show real changes. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.
PR-friendlyQuick fix
When your editor isn't open and a one-liner needs formatting. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.
review-readyDocs examples
Standardise inline TS examples for documentation. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.
deterministicFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.