TypeScript Formatter
Paste TypeScript or TSX and get clean, consistently formatted code from Prettier, the formatter most TypeScript projects use. Pick the print width, indentation, semicolons and quote style; syntax errors are shown with the exact line and column.
Last updated:
Tip: press Ctrl + Enter to format; Tab indents inside the editor (press Esc first to move focus). Formatting runs locally with Prettier; your code is never uploaded.
How to use the TypeScript Formatter
- Paste your code into the TypeScript input, open a .ts or .tsx file, or load a sample.
- Pick the style: print width, indentation, quotes, trailing commas, semicolons and arrow parentheses.
- Press Format TypeScript (or Ctrl + Enter). With Format as I type on, the output refreshes while you edit.
- Fix syntax errors if shown: the message gives the line and column, and Show in input jumps to the spot.
- Copy or download the formatted code, or press Use output as input to keep editing it.
Prettier options and their .prettierrc names
Every option in the tool maps to a Prettier setting, so you can copy your choices into a .prettierrc file and get identical output in your editor and CI:
| Option in this tool | .prettierrc key | Default | Effect |
|---|---|---|---|
| Print width | printWidth | 80 | Line length the printer tries to fit code into. |
| Indentation | tabWidth, useTabs | 2, false | Spaces per level, or tab characters. |
| Semicolons | semi | true | Off prints no semicolons and adds a leading ; only where ASI would break the code. |
| Quotes | singleQuote | false | Prettier still picks the quote that needs fewer escapes. |
| Trailing commas | trailingComma | "all" | "all", "es5" or "none" in multi-line lists. |
| Spaces in braces | bracketSpacing | true | { a, b } versus {a, b}. |
| Arrow parens | arrowParens | "always" | (x) => x versus x => x. |
Example .prettierrc: { "printWidth": 100, "singleQuote": true, "trailingComma": "all" }
Common TypeScript syntax errors
- ',' expected or ')' expected: a missing comma between parameters or object members, or a bracket that was never closed.
- '}' expected: a block, class or interface body is not closed; the reported line is often at the end of the file, so look upward for the opening brace.
- Unterminated string literal: a quote is missing, or curly quotes (“ ”) were pasted from a document. Template literals use backticks.
- JSX element has no corresponding closing tag: in TSX every element must be closed, including void elements such as
<br />and<input />. - Expression expected on a
<: the file contains JSX but is being parsed as plain .ts. Select TSX.
Only want to know whether plain JavaScript parses? Use the JavaScript Syntax Checker. Generating interfaces from an API response? Try JSON to TypeScript.
Frequently asked questions
Is my code uploaded to a server?
No. Prettier and its TypeScript parser are downloaded once as JavaScript files and run inside your browser tab. The code you paste is never sent anywhere, so it is safe for private or proprietary source.
Does this produce the same output as Prettier in VS Code?
Yes, as long as the options match. The tool runs Prettier 3 with the typescript parser, the same engine used by the Prettier VS Code extension and the prettier command line. Set the same print width, tab width, quotes, semicolons and trailing comma values as your .prettierrc.
Does the formatter check types?
No. It parses the syntax and reprints it; it does not run the TypeScript compiler's type checker. Code with type errors such as a wrong argument type is formatted normally, while code with syntax errors such as a missing bracket is rejected with the error location.
How do I format TSX or React components?
Choose TSX / React (.tsx), or leave Language on Auto: if the code contains JSX the tool parses it as TSX. Note that the old <Type>value type assertion syntax is not allowed in .tsx files; use value as Type instead.
What does print width do?
Print width is the line length Prettier tries to stay within. It is a target, not a hard limit: long strings, URLs or deeply nested code can exceed it. 80 is Prettier's default; many teams use 100 or 120.
What is the difference between the trailing comma options?
All (Prettier 3's default) adds trailing commas wherever TypeScript allows them, including function parameters and type parameter lists. ES5 adds them only in arrays and objects. None removes them. Trailing commas make git diffs cleaner when items are added.
Why are some of my blank lines or comments kept?
Prettier preserves single blank lines between statements and keeps comments, because they carry meaning for readers. Multiple blank lines are collapsed into one.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.