TypeScript Formatter

1. Paste TypeScript or TSX, drop a .ts, .tsx, .mts or .cts file, or choose Load example.
2. In Settings, match your project's Prettier options: print width, tab width, semicolons, quote style and trailing commas.
3. Copy the result with ⌥/Alt C or download it with ⌘/Ctrl S. Use Switch to JavaScript if the file turns out to be plain JavaScript.

#Interfaces, generics and union types

A compressed type module, formatted with the defaults.

interface User{id:number;name:string;roles?:Array<"admin"|"editor">}
export function byRole(users:User[],role:"admin"|"editor"):User[]{return users.filter(u=>u.roles?.includes(role)??false)}
type Handler<T>=(event:T)=>void|Promise<void>

Result:

interface User {
  id: number;
  name: string;
  roles?: Array<"admin" | "editor">;
}
export function byRole(users: User[], role: "admin" | "editor"): User[] {
  return users.filter((u) => u.roles?.includes(role) ?? false);
}
type Handler<T> = (event: T) => void | Promise<void>;

#TSX component

Typed props and JSX in the same file. The parser detects JSX automatically.

type Props={title:string;count?:number}
export const Badge=({title,count=0}:Props)=><span className="badge">{title} {count>0&&<b>{count}</b>}</span>

Result:

type Props = { title: string; count?: number };
export const Badge = ({ title, count = 0 }: Props) => (
  <span className="badge">
    {title} {count > 0 && <b>{count}</b>}
  </span>
);

#Angular-style class with 4-space indent and single quotes

Decorators, parameter properties and enums, with Tab width set to 4 and Single quotes on.

enum Status{Active="active",Archived="archived"}
@Component({selector:"app-root",template:"<p>{{title}}</p>"})
export class AppComponent{constructor(private readonly http:HttpClient,@Inject(TOKEN) private cfg:Config){}
title="demo"}

Result:

enum Status {
    Active = 'active',
    Archived = 'archived',
}
@Component({ selector: 'app-root', template: '<p>{{title}}</p>' })
export class AppComponent {
    constructor(
        private readonly http: HttpClient,
        @Inject(TOKEN) private cfg: Config,
    ) {}
    title = 'demo';
}

• Print width — the line length Prettier tries to stay within (80, 100 or 120) before breaking signatures, unions and object types across lines.
• Tab width — spaces per indentation level, 2 or 4.
• Semicolons — ends statements, interface members and type aliases with semicolons; turn it off for a semicolon-free style.
• Single quotes — prints string literals and string literal types with single quotes where that does not add escapes.
• Trailing commas — adds a trailing comma in multi-line lists: All (also parameters, type parameters and enums), ES5 (arrays and objects only) or None.

#"JSX element 'HTMLInputElement' has no corresponding closing tag"

The file mixes an angle-bracket cast such as <HTMLInputElement>el with JSX. In TSX files that syntax is ambiguous, so the parser reads the cast as an opening tag. Rewrite the cast as el as HTMLInputElement, which works in both .ts and .tsx.

#"',' expected" with a line and column

A bracket, parenthesis or type argument list is not closed where the parser expected it — often a missing ) in a function signature. Press F8 to jump to the position and check the token just before it.

#Generic arrow functions in TSX

In a TSX file <T>(x: T) => x looks like a tag. Write <T,>(x: T) => x — the trailing comma tells the parser it is a type parameter. Prettier keeps that comma in the output.

#The code has no types at all

Plain JavaScript formats correctly here too, but the JavaScript Formatter adds a Minify mode and reports JavaScript-specific hints. Use the Switch to JavaScript Next action to move the code across.

#Minifying TypeScript

This page formats only; it has no minify step. The JavaScript Minifier reads plain JavaScript and rejects typed code with "TypeScript syntax at line N — the minifier accepts JavaScript only." Compile the file with tsc or your bundler first, then minify the emitted .js.

#Is this the same output as Prettier in my editor?

Yes, for the same options. The page runs Prettier's own TypeScript parser and printer in your browser, so a file formatted here and one formatted by the Prettier extension with matching print width, tab width, semicolons, quotes and trailing commas are identical. Plugins and overrides from your .prettierrc are not read, since nothing is loaded from your project.

#Does it support TSX and decorators?

Yes. TSX is detected from the content, so React components with typed props format without switching modes. Decorators on classes, members and constructor parameters — as used by Angular and similar frameworks — are parsed and printed on their own lines or inline, following Prettier's rules for decorator placement.

#Will formatting fix type errors?

No. The formatter only reads syntax. It will format code that assigns a string to a number or calls a method that does not exist, because those are type errors, not syntax errors. Run the TypeScript compiler for type checking. What the formatter does catch is broken syntax, with the exact line and column.

#Can I format a single type or interface?

Yes. Any valid TypeScript fragment works: a lone interface, a union type, a declare module block or a .d.ts file. Paste just the part you need to tidy, such as a type copied from an API response, and the formatter wraps long unions and object types at the print width you choose.

#Is my code uploaded?

No. Prettier runs locally, inside an isolated editor frame that blocks network requests, so proprietary code is never sent to a server or stored there. Settings are remembered on this device. Your input is saved only if you turn on "Remember my last input", and then only in this browser.

#Why did Prettier move my line breaks?

Prettier reprints the code from its syntax tree, so it chooses line breaks itself based on the print width. It keeps single blank lines between statements and keeps an object type expanded if you put a line break after its opening brace. Raise Print width if signatures wrap more than you like.

Formatting is not compiling. The formatter never type-checks your code, so const x: number = "a" formats without complaint — only syntax errors are reported. It also does not remove types, sort imports or apply lint rules. For those, use tsc and your linter; for the reasoning behind Prettier's defaults, see Prettier Defaults Explained.

Format typed API payloads with the JSON Formatter, tidy schema files with the GraphQL Formatter, or see every code tool in the code category.