TypeScript Formatter

What Is a TypeScript Formatter?

A TypeScript formatter automatically rewrites your .ts and .tsx code with consistent indentation, spacing, quote style, and semicolons — without changing what the code does. This tool uses Prettier with the TypeScript parser, the same formatter used in most modern TypeScript projects. Unlike tsc, Prettier only handles style — it does not type-check your code.

How to Format TypeScript Online

1. Paste your TypeScript or TSX code into the left editor pane (or click Load Sample).
2. Select your language: TS for plain TypeScript, TSX for React components with JSX.
3. Choose your indent style: Tab, 2, 4, or 6 spaces.
4. Set your print width — Prettier wraps long lines at this column.
5. Toggle Semi, ' Quotes, { } Space, and Trailing Comma to match your team style guide.
6. Click Format. The formatted result appears in the right pane.
7. Enable Live mode to auto-format as you type (400 ms debounce).
8. Click Copy or Download to save as .ts or .tsx.
9. Use Explain with AI for a plain-English breakdown of the TypeScript code.

Formatting Options Explained

• Lang: TS / TSX — TS uses the Prettier typescript parser for plain .ts files. TSX enables JSX support for React .tsx components.
• Indent: Tab / 2 / 4 / 6 — indentation character and width per level. 2 spaces is the TypeScript community default; 4 spaces is common in enterprise projects.
• Width: 80 / 100 / 120 — column at which Prettier wraps long lines. 80 is the classic default; 120 is common in TypeScript monorepos.
• Semi — adds semicolons at statement ends (default on). Turn off for Standard.js or Deno style.
• ' Quotes — uses single quotes for string literals (default on). JSX attribute values always use double quotes regardless.
• { } Space — spaces inside object braces: { foo: bar } vs {foo: bar} (default on).
• Comma → ES5 — trailing commas in arrays and objects, safe in all modern environments.
• Comma → All — trailing commas everywhere including function parameters (ES2017+).
• Arrow: (x) / x — always-parens (x) => x vs avoid-parens x => x for single-param arrow functions.
• Live — reformats automatically 400 ms after you stop typing.
• No comments — strips all // and /* */ comments. Useful when preparing code for documentation or review.

TypeScript vs TSX — Which Should I Choose?

Use TS for service files, utility modules, interfaces, classes, and any .ts file that contains no JSX. Use TSX for React component files (.tsx) that mix TypeScript with <JSX /> syntax. If you paste a React component in TS mode you will get a parse error on the first < character — switch to TSX and reformat.

Does Prettier Format TypeScript Type Annotations?

Yes — Prettier's TypeScript parser handles all TypeScript syntax: interfaces, type aliases, generics, enums, decorators, mapped types, conditional types, as const, non-null assertions (!), and optional chaining. It reformats the style of type annotations (line breaks, spacing) but never removes or changes the types themselves.

Common TypeScript Formatting Errors

• SyntaxError: Unexpected token — your code has a syntax error. Fix it first, then format.
• Unexpected < in TS mode — you're formatting TSX. Switch Lang to TSX.
• Decorator parse error — legacy decorators (@Component) require experimentalDecorators. Prettier handles modern decorators natively; older Angular/NestJS decorator syntax may show parse errors — try formatting the file in your IDE instead.
• Generic arrow function ambiguity in TSX — <T>() => is ambiguous in TSX. Prettier resolves this by adding a trailing comma: <T,>. This is correct and intentional.

Related Tools

• TypeScript Minifier — compress .ts and .tsx for production
• JavaScript Formatter — format plain .js and .jsx files
• JavaScript Minifier — minify JS with Terser
• CSS Formatter — beautify CSS stylesheets

Is My Code Sent to a Server?

No — all formatting runs entirely in your browser using Prettier's standalone bundle. Your code never leaves your machine. No account required, no rate limits on formatting.