How to use the TypeScript Formatter
Format TypeScript in three steps:
1
Paste your TypeScript
Paste .ts or .tsx code — including types, interfaces, generics, decorators, or JSX — into the input panel. You can also upload a .ts, .tsx file using the upload icon.
2
Configure options and click Format
Set indent size, quote style, semicolons, trailing comma (none/es5/all), and print width in the toolbar. Click 'Format TypeScript' to run Prettier.
3
Copy or download
Copy the formatted code to clipboard or download it as a .ts file. Line count, character count, and file size are displayed in the stats bar.
When to use this tool
Use the TypeScript formatter for consistent, readable TS and TSX code:
- →Formatting TypeScript source files before committing to a repository that enforces Prettier style
- →Cleaning up auto-generated TypeScript from tools like openapi-typescript, GraphQL Code Generator, or Prisma
- →Formatting TypeScript snippets from AI coding assistants before reviewing or integrating them
- →Standardising TypeScript code style in files from multiple contributors before a code review
- →Beautifying .tsx React component files with TypeScript generics and JSX
- →Preparing TypeScript code examples for documentation, tutorials, or blog posts
- →Reformatting legacy TypeScript files before migrating them to strict mode or a new tsconfig
Frequently asked questions
Q:What TypeScript-specific syntax is supported?
The formatter supports the complete TypeScript language: interfaces, type aliases, union and intersection types, generics with constraints, conditional types (T extends U ? X : Y), mapped types, template literal types, enum declarations (const and regular), decorators (@Component, @Injectable), access modifiers (public, private, protected), abstract classes and methods, index signatures, namespace and module declarations, triple-slash directives, and all utility types (Partial, Required, Readonly, Record, etc.).
Q:Does it support .tsx files with React and JSX?
Yes — Prettier's TypeScript parser fully understands JSX inside .tsx files. Component props typed with interfaces or generics (FC<Props>, ComponentProps<typeof X>), generic JSX components (<List<User> />), typed hooks (useState<User | null>(null)), and conditional JSX rendering are all formatted correctly.
Q:What does the 'trailing comma' option control?
'None' adds no trailing commas anywhere. 'ES5' adds trailing commas in multi-line arrays, objects, and destructuring patterns — these are valid ES5 and safe in all modern environments. 'All' additionally adds trailing commas in function parameters and arguments — valid in ES2017+ environments with a modern compiler target. 'ES5' is the Prettier default and the most widely used setting.
Q:Can I format auto-generated TypeScript from openapi-typescript or Prisma?
Yes — this is one of the most common use cases. Generated TypeScript from tools like openapi-typescript, swagger-typescript-api, Prisma Client, GraphQL Code Generator, or tRPC typically uses long lines and inconsistent spacing. Paste the generated output here and Prettier will produce clean, consistently formatted TypeScript with your preferred style settings.
Q:Is this different from running 'prettier --parser typescript' locally?
No — this tool uses the exact same Prettier version and TypeScript parser as you would get running 'npx prettier --parser typescript' on the command line. The output is byte-for-byte identical to a local Prettier run with the same options (tabWidth, singleQuote, semi, trailingComma, printWidth). Use the same settings here as your .prettierrc to get matching output.
Q:Does the formatter validate TypeScript types or check for errors?
No — Prettier is a formatter, not a type-checker. It formats syntactically valid code without evaluating types. Type errors (incorrect generic constraints, missing interface properties, type mismatches) are not detected or reported. For type checking, run 'tsc --noEmit' locally or use your IDE's TypeScript language server.
Q:What print width setting should I use?
80 is the Prettier default and works well for most projects. Teams using wider monitors or working with verbose TypeScript generics sometimes use 100 or 120. The print width is a soft limit — Prettier will exceed it when breaking a line would produce less readable code (e.g. function signatures with many typed parameters). Match whatever value is set in your project's .prettierrc file.