peartools

TypeScript Formatter

Paste messy or minified TypeScript and get it back with clean indentation, line breaks, and spacing. Your type annotations are kept exactly. Everything runs in your browser, so your code stays on your device.

Indent

Format supports TypeScript, including type annotations and JSX. Style options apply to Format.

Result

What the TypeScript formatter does

TypeScript can end up with uneven spacing after edits, merges, or a quick copy and paste. A formatter rewrites the code with clean indentation, one statement per line, and consistent spacing, so the structure is clear at a glance. It keeps your types, interfaces, and generics exactly as written and only changes the layout. This tool formats your code with Prettier.

Why use our TypeScript formatter

  • ·Free. No signup, no paywall.
  • ·Runs in your browser. Your code is never uploaded, so it is safe for private projects.
  • ·Keeps your types. Type annotations, interfaces, and generics stay exactly as written.
  • ·Powered by Prettier. The output matches what most projects and editors already produce.
  • ·Syntax highlighting. The editor colours your code so it is easy to scan as you work.

TypeScript formatting options

Format TypeScript

Rewrites your code with clean indentation, line breaks, and spacing using Prettier. Type annotations, interfaces, and generics are kept and laid out clearly.

Beforeconst n:number=1;type P={x:number}Afterconst n: number = 1; type P = { x: number };

Type annotations kept

Format keeps your types, interfaces, enums, and generics as written and only fixes the layout. It never removes or changes your type information.

Beforefunction id<T>(x:T):T{return x}Afterfunction id<T>(x: T): T { return x; }

TypeScript semicolons

Adds semicolons at the end of statements. Turn it off to omit optional semicolons. Prettier still adds them where needed to keep the code working.

Beforelet x = 1Afterlet x = 1;

Quotes and indentation

Prefer single or double quotes for strings and choose 2 or 4 spaces per level. Prettier may use the other quote style to avoid extra escapes.

Beforelet s = "hi"Afterlet s = 'hi';

When to format TypeScript

A formatter helps any time code is hard to read. These are the cases that come up most:

  • ·Cleaning up before review. Format code so a teammate can read it in a pull request.
  • ·Fixing spacing after a merge. Reset uneven indentation and spacing to one consistent style.
  • ·Cleaning up a snippet. Fix the spacing on code you pasted from a chat or a web page.
  • ·Learning TypeScript. See how code breaks into clear lines while you are still learning.

Run Prettier on your own TypeScript project

This tool uses Prettier with its TypeScript parser, so types, interfaces, generics, and decorators are formatted the same way they would be in your editor. To format a whole project:

ToUse
Format every TypeScript filenpx prettier --write "src/**/*.ts"
Check in CI without changing filesnpx prettier --check .
Save your settingsPut "tabWidth", "semi", and "singleQuote" in a .prettierrc file at the project root

Prettier only changes layout. It does not type check, so run tsc --noEmit as well if you want to catch type errors.

Related code formatters

For plain JavaScript, use theJavaScript formatter and beautifier. For JSON data, use the JSON formatter and validator.

TypeScript formatter questions

What is a TypeScript formatter?
A TypeScript formatter takes code with messy spacing and rewrites it with clean indentation, line breaks, and consistent spacing. It does not change what the code does or alter your types, only how it looks, so it is easier to read, review, and debug.
How do I format TypeScript code?
Paste your code into the input box, pick your indentation and quote style, then click Format. The clean version appears below. Click the copy button to copy it, or download it as a .ts file.
Does it keep my type annotations?
Yes. Format preserves your types, interfaces, enums, and generics exactly. It only adjusts spacing and layout. It does not strip types or turn your code into JavaScript.
What does it use to format the code?
It uses Prettier, the widely used code formatter, running in your browser. That means the output matches what most projects and editors produce, with no setup and no install.
Can it read modern TypeScript and TSX?
Format supports modern TypeScript, including type annotations, generics, decorators, and TSX. It does not run your code, so it works even if the code has type errors, as long as it parses.
Is my code kept private?
Yes. Formatting runs in your browser. This tool does not upload or store your code. It downloads its formatting library when you first use Format, so the first use needs an internet connection.