TypeScript Formatter
Beautify TypeScript source with consistent indent, quote and semicolon conventions.
What is TS Formatter?
A TypeScript beautifier for source you are reviewing rather than compiling: type declarations, interfaces, generics, decorators and class members all land in a consistent layout.
How it works
It is the same printer as the JavaScript Formatter with type-aware handling of angle brackets: a `<` that follows an identifier without a space and is followed by a type name, `>`, `&` or `[` is treated as a type-argument opener, so `Map<string, Order[]>` stays intact instead of becoming `Map < string, Order[] >`.
- Paste the source. Drop in code, a stylesheet, a query or a selector list. Everything is read locally — the page never uploads what you paste.
- Choose the options. Indent width, quote style, keyword case or target browsers. The result updates as you change them, so you can see the effect immediately.
- Copy or download. Copy the result to the clipboard or download it as a file. Reset clears the form and returns every option to its default.
Examples
A minified bundle → readable code
Beautifying a 40 KB one-line stylesheet or script turns it into something reviewable, without altering a single token of the program itself.
A query moved between databases
MySQL's backticks, AUTO_INCREMENT and LIMIT 10, 20 become PostgreSQL's double quotes, identity columns and OFFSET — with a list of what still needs a human.
A stylesheet that only breaks in Safari
backdrop-filter, user-select and position: sticky need -webkit- prefixes for older Safari, which the CSS Autoprefixer adds for exactly the targets you tick.
Common mistakes
Expecting a formatter to fix invalid code
Formatting is whitespace and quoting. A missing brace, an unclosed tag or an unquoted variable survives the round trip and is reported instead — check the findings list.
Minifying without running the tests afterwards
Even a safe, non-mangling minifier can expose an existing automatic-semicolon-insertion bug. The JavaScript Minifier keeps the newlines that matter, but re-run your tests before shipping.
Treating a rewritten query as verified
The SQL Dialect Converter translates the syntax it can prove; data types, casts and function differences are listed for review, not guessed. Run the converted query against a real database.
Renaming or reformatting generated files
Regenerating a formatter's output is a no-op only if the formatter is the same one that produced it. Keep generated code out of the round trip and format the source it came from.
Frequently asked questions
Does it type-check my code?
No. It only formats — a type error, a missing import or a wrong generic argument passes straight through. Run `tsc --noEmit` in your project for that; this page has no type checker and no compiler.
How does it tell a generic from a comparison?
By context: a `<` written immediately after an identifier and followed by a type-like token opens a type argument list, while `a < b` — with spaces — is left as a comparison. Ambiguous cases such as `a<b` in a conditional stay as the author wrote them.
Can it format TSX?
It formats TSX text without a JSX parser, so JSX elements are laid out as parenthesised expressions and long attribute lists are not reflowed. For JSX-heavy files, a project-formatter such as Prettier gives a better result.