TypeScript Formatter & Beautifier

About TypeScript Formatter

Nearly everything TypeScript adds on top of JavaScript is invisible to a formatter that works on braces and semicolons. A type annotation is part of a declaration, generic arguments use angle brackets that never affect nesting, and interface, enum and type X = { … } all open ordinary blocks. So this is the JavaScript layout engine with the type syntax spaced afterwards, which is both less code and less that can go wrong than a second parser would be.

What the spacing pass is for is the thing that makes formatted TypeScript look unformatted: a layout step that collapses whitespace turns name : string and name:string into two different-looking declarations, runs a multi-line union onto one line without spaces around the bars, and closes up the arrow in a function type. All of that is cosmetic and all of it is a spacing rule rather than a parse.

It is a formatter and not a compiler. It will lay out code that does not typecheck, and it will not tell you that it does not — which is exactly what you want when the reason you are reaching for it is that the file is a mess.

Where it helps

• Lays out interfaces, enums, type aliases and generics without needing a TypeScript compiler in the page.
• Spaces type annotations, unions and function types consistently, which is most of what makes formatted TypeScript readable.
• Leaves the contents of strings and template literals alone, so a colon inside a string stays as it was written.
• Works on code that does not compile, which is usually the state code is in when it needs formatting.
• Runs in the browser, so unreleased source does not have to be pasted into someone else's service.

Limits

• It does not parse types, so it cannot reflow a very long union or wrap a long signature to a column width.
• Decorators and JSX are laid out by the same brace rules and may not match what Prettier would produce.
• It reports nothing about correctness: no type errors, no unused imports, no syntax validation.
• Formatting is structural rather than configurable — there is no print width, no quote preference and no trailing-comma setting.

Frequently asked questions

Is this the same as Prettier?

No. Prettier parses the file and reflows it to a print width, which requires a full parser for every syntax it supports. This follows braces and semicolons and then tidies the type spacing, which handles the common case in a fraction of the code — and will differ from Prettier on long lines.

Does it work on .tsx?

Partly. JSX is laid out by the same brace rules, which is reasonable for simple markup and will not match a JSX-aware formatter on anything nested or conditional.

Will it tell me if my types are wrong?

No, and deliberately so. Typechecking needs the whole project — the imports, the tsconfig, the dependency types. This formats the text in front of it, which is why it still works on a file that does not compile.

Related tools

• JavaScript Formatter — Re-indent JavaScript and TypeScript source
• Minifier — Shrink CSS, HTML or JavaScript
• Structure Formatter — Pretty-print JSON, XML, YAML, TOML, TOON or HCL with a chosen indent
• Stack Trace Analyzer — Read a stack trace or crash in any common language: the cause, your frames, and what it usually means
• HTML Formatter — Indent and tidy HTML markup
• CSS Formatter — Format stylesheets with consistent indentation

More Web Development tools

• HTML Formatter — Indent and tidy HTML markup
• CSS Formatter — Format stylesheets with consistent indentation
• JavaScript Formatter — Re-indent JavaScript and TypeScript source
• SCSS/SASS Formatter — Format SCSS syntax and nested rules
• SQL Formatter — Format SQL statements with dialect selection
• SQL Minifier — Collapse formatted SQL into compact text
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Query String Parser and Builder — Convert query strings into editable key-value data
• CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
• CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
• cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
• Minifier — Shrink CSS, HTML or JavaScript
• Flexbox Playground — Try every flex property and read the CSS back
• CSS Grid Playground — Build a grid template and see the tracks it makes
• Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
• SVG Path Viewer — Draw path data and read back what it contains
• SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
• OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
• Regex Tester — Test patterns, inspect groups and preview replacements
• User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
• HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
• HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
• Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
• Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework