About the TypeScript Formatter
Prettier is the formatter most TypeScript projects use, and this tool runs the real thing: Prettier's standalone build with its TypeScript parser, loaded on demand. Interfaces, generics, decorators, enums, type-only imports, satisfies expressions and TSX all parse correctly, and the output is exactly what prettier --parser typescript would produce with the same options.
The options offered are the ones teams most often change: indent width or tabs, semicolons, single or double quotes, and print width. Trailing commas follow Prettier's current default. Everything else uses Prettier's defaults, so the result matches a project that has a minimal .prettierrc.
A syntax error is reported with line and column, which also makes this a quick way to check that a TypeScript snippet parses. For plain JavaScript with a lighter formatter, use the JavaScript Formatter; for React components in .jsx files, the JSX Formatter.
How to use
- Paste TypeScript or TSX on the left.
- Set indent, quotes, semicolons and width to match your project.
- Copy the formatted code.
Common questions
- Which Prettier version is used?
- The current Prettier 3 release bundled with this site.
- Can I format TSX?
- Yes. The TypeScript parser handles JSX inside .tsx files.
- Why is the output different from my editor?
- Your project probably has a .prettierrc with other options, or a different Prettier major version. Match the options here to compare.
- Does it type-check?
- No. Prettier only parses; type errors are not reported.