One angle bracket · two grammars
Tell the parser whether JSX is invited.
In a .ts file, angle brackets can participate in type syntax. In a .tsx file, the same tokens may begin JSX. Choosing TS or TSX first prevents a formatter from guessing at the most important boundary.
.ts · TypeScript
const value = <User>input
Legacy angle-bracket assertion is legal TypeScript.
.tsx · TypeScript + JSX
const view = <UserCard />
Angle brackets open JSX; use input as User for assertions.
Type-syntax specimen rail
Formatting should understand the syntax it preserves.
Type-only import
import type { User } from './types'satisfies
const theme = raw satisfies ThemeGeneric constraint
function pick<T extends Entity>(value: T)Mapped type
type Flags<T> = { [K in keyof T]?: boolean }Conditional type
type Id<T> = T extends Entity ? string : neverTSX props
const Card = (props: CardProps) => <article />Formatter evidence
Parse first. Reprint the same program shape.
Source
Tokens, comments, types, and JSX arrive as text.
TypeScript parser
The selected grammar builds an abstract syntax tree.
Prettier printer
Repository-style line breaks and spacing are chosen.
Formatted source
Types and comments remain source; nothing executes.
Four boundaries
A green format result is not a green build.
Type-check
Can these types actually compose?
Next: tsc --noEmitLint
Does code follow semantic and repository rules?
Next: ESLintTranspile
What JavaScript should target browsers receive?
Next: tsc / bundlerExecute
What does the program do at runtime?
Next: Tests / runtimeRepository parity
One-off cleanup should lead back to the codebase.
Browser
Select TS or TSX and inspect the one-off result.
Editor
Use format-on-save with the repository Prettier config.
Commit
Review the formatting diff without semantic changes.
CI
Run prettier --check beside lint and type-check gates.