TypeScript Formatter

Formatting result

{{ resultsReady ? `${computation.values.formatted_lines} formatted lines` : 'Source needs attention' }}

Mode:{{ resultsReady ? parserResolutionLabel : '—' }} Input:{{ resultsReady ? formatBytes(computation.values.source_bytes) : '—' }} Engine:{{ formatterEngineLabel }}

TypeScript source:

Paste source or load one TS, TSX, MTS, CTS, or TXT file up to 256 KiB. Nothing is uploaded or executed.

Source format:

Auto detect looks for JSX tags and fragments, then conservatively resolves other source as TypeScript. Pin TSX for ambiguous component syntax.

Indentation:

Preferred line width:

String quotes:

Trailing commas:

Semicolons:

Turn this option on when semicolons is required.

{{ semicolons ? 'Print semicolons' : 'Omit optional semicolons' }}

Line endings:

The default is LF. Opening Advanced without changing this value does not change the result.

{{ formattedSource }}

The chart renderer is unavailable. Exact width counts remain available in the formatting ledger.

Signal	Value	Meaning	Copy
{{ row.label }}	{{ row.display }}	{{ row.detail }}

TypeScript formatting turns one valid source representation into a consistent layout without changing the intended program. It handles syntax that a plain JavaScript formatter may misread, including type annotations, interfaces, generic parameters, type-only imports, and TSX markup. The result is most useful when a team agrees on the same parser mode and style settings.

TSX creates an important ambiguity. Angle brackets can represent JSX elements, but related characters also appear in generic types and comparisons. A file extension normally resolves that choice in a project. Pasted snippets do not always carry an extension, so ambiguous component source should be identified as TSX explicitly instead of relying on detection.

Indentation controls the leading spaces or tabs used for nested source.
Preferred line width guides where expressions and declarations may wrap; it is not a hard character limit.
Quote, comma, and semicolon preferences choose a consistent printable form while retaining syntax required for correctness.
Line endings determine whether the formatted file uses LF or CRLF.

A formatter parses and reprints source. That makes it stricter than simple whitespace cleanup, but it does not replace a compiler. Successful formatting does not prove that types agree, imported modules exist, JSX settings are correct, or the program passes tests. It only shows that the chosen grammar accepted the source and produced output.

Style preferences also have limits. A quote preference may be overridden when the other quote avoids extra escaping. A style that omits optional semicolons still needs protective semicolons in cases where automatic semicolon insertion could join statements incorrectly. Long strings, comments, URLs, type names, and atomic expressions may remain wider than the preferred line width.

Formatting works best as a repeatable repository rule rather than a one-time cleanup. Use the same source mode, indentation, width, quote, comma, semicolon, and line-ending settings as the destination project; otherwise a later project formatter may rewrite the file again.

How to Use This Tool:

Start with the grammar choice, then match the style settings to the repository that will receive the code.

Paste TypeScript or TSX into TypeScript source, or load one TS, TSX, MTS, CTS, or text file no larger than 256 KiB.
Choose Auto detect, TypeScript, or TSX. Pin TSX when component syntax could be confused with an angle-bracket type expression.
Set indentation, preferred width, quotes, trailing commas, semicolons, and LF or CRLF line endings to match the destination project.
Read the grammar result and Engine badge, then inspect Formatted source. Correct any reported line and column error before copying the code.

Interpreting Results:

The resolved mode shows which grammar formatted the snippet. An Auto → TypeScript result is conservative: obvious JSX tags and fragments select TSX, while other source remains TypeScript. If a component-like snippet is accepted but formatted unexpectedly, pin TSX and compare again.

Lines over target counts formatted lines longer than the preferred width using Unicode code points. It is a review signal, not a failure count. Inspect the longest lines to decide whether they contain indivisible strings, comments, types, or expressions that the formatter reasonably kept intact.

The Engine badge matters when comparing results. The normal grammar-aware formatter applies the full style policy. Local fallback provides bounded readable layout when that formatter is unavailable, but it may not reproduce every quote, comma, width, or TSX decision. Do not treat fallback output as canonical for a shared repository.

Technical Details:

Grammar-aware formatting separates syntax decisions from printable style. The source first passes bounded structural checks for unclosed strings, template literals, block comments, and mismatched parentheses, brackets, or braces. The selected TypeScript or TSX grammar then parses the source before the style options are applied.

Transformation Core

The transformation can be read as a short path from source text to a formatted artifact. Each stage either resolves a grammar question or changes only presentation.

TypeScript formatting transformation stages
Stage	Rule	Observable result
Size check	Count UTF-8 bytes and reject input above 262,144 bytes.	Source size is reported in bytes and lines.
Mode resolution	Use the selected grammar, or recognize obvious JSX tags and fragments in Auto mode.	The summary shows TypeScript or TSX as the resolved mode.
Structure check	Reject an unclosed quote, comment, or delimiter with a line and column.	No formatted artifact is produced until the structure is corrected.
Parse and print	Reprint the accepted syntax using the chosen style policy.	Types and executable expressions remain source code; only representation changes.
Measure	Count output bytes, lines, maximum line length, and widths above the preference.	The line-width profile describes the formatted result.

TypeScript formatting option semantics
Policy	Available values	Technical meaning
Indentation	2 spaces, 4 spaces, or tabs	Sets the indentation unit for nested constructs.
Preferred width	80, 100, or 120 characters	Guides wrapping without imposing a hard maximum.
Quotes	Prefer double or single	May retain the alternative when it avoids additional escapes.
Trailing commas	Modern syntax, ES5-compatible positions, or none	Controls multiline endings where the selected grammar permits commas.
Semicolons	Print or omit optional semicolons	Required separators remain when omission could change parsing.
Line endings	LF or CRLF	Normalizes the complete formatted artifact to one newline convention.

The preliminary structure scan deliberately covers common bounded failures rather than the whole language. The grammar parser remains authoritative for other syntax errors. Neither step performs type checking, control-flow analysis, module resolution, lint rules, or code execution.

Line lengths are measured after converting CRLF to a single logical newline and removing one formatter-owned final newline. Character counts use Unicode code points, so many non-ASCII characters count as one visible position even when their UTF-8 byte length is larger.

Privacy Notes:

Pasted source and loaded files remain in the browser and are not uploaded or executed. The page may download supporting formatter and chart code, so an initial network connection can still occur even though the source text is not sent with those requests.

References:

Formatting options, Prettier 2.8.8.
JSX, TypeScript Handbook.