TypeScript & TSX formatter using Prettier.

Worked example

The default input above is three lines of compressed TSX. With 2-space indent, semicolons, double quotes and print width 80, Prettier 3.9.9 returns:

interface User {
  id: number;
  name: string;
}
const greet = (u: User): string => {
  return "Hi, " + u.name;
};
export function App({ user }: { user: User }) {
  return <div className="x">{greet(user)}</div>;
}

Change to 4 spaces, no semicolons, single quotes and print width 40 and the same code reflows: the App parameter list and the JSX element each break onto their own lines because they no longer fit in 40 columns, and every statement loses its trailing semicolon.

What each option does

These map one-to-one to Prettier’s documented options (Prettier options): indent sets tabWidth (2 or 4) or useTabs; semicolons sets semi (default true); quotes sets singleQuote (default false); print width sets printWidth (default 80). Print width is a target, not a hard limit: Prettier breaks lines that would exceed it, but a long string or identifier that cannot be split stays on one line. Prettier’s own rationale is in its rationale page.

How it runs in the browser

The page loads Prettier’s standalone build with the typescript parser plugin and the estree printer plugin from jsDelivr, as described in Prettier in the browser. Your code is passed to Prettier in the page and is not sent to any server. Only the two library files are downloaded, so you need a connection the first time. Other Prettier options (trailingComma, arrowParens, bracketSpacing) keep Prettier’s defaults here.

FAQ

Will this match my project’s Prettier output?

Only if your project uses the same Prettier major version and the same options. Prettier 3 changed the trailingComma default to "all"; a project pinned to Prettier 2 or with a .prettierrc will differ. This page does not read config files.

Why does my generic arrow function fail in TSX?

In a .tsx file, <T>(x: T) => x is ambiguous with JSX. Write <T,>(x: T) => x, or switch Language to TypeScript (.ts) if the file has no JSX.

Does formatting change what my code does?

Prettier is designed to change layout (whitespace, line breaks, parentheses, quotes, semicolons) and not behaviour (see its rationale page). It does not type-check, so a file with type errors formats fine; only syntax errors are rejected.