TypeScript Formatter – Format TS & TSX Online

Example

Before

enum Role{Admin="admin",User="user"}
type Handler<T extends object=Record<string,unknown>>=(req:{body:T;params:Record<string,string>},res:{json:(v:unknown)=>void})=>Promise<void>|void
@Injectable() export class UserService{constructor(private readonly repo:Repository<User>,@Inject(CACHE) private cache?:Cache){}
async find(id:string):Promise<User|undefined>{return this.cache?.get<User>(id)??this.repo.findOne({where:{id}})}}

After

enum Role {
  Admin = "admin",
  User = "user",
}
type Handler<T extends object = Record<string, unknown>> = (
  req: { body: T; params: Record<string, string> },
  res: { json: (v: unknown) => void },
) => Promise<void> | void;
@Injectable()
export class UserService {
  constructor(
    private readonly repo: Repository<User>,
    @Inject(CACHE) private cache?: Cache,
  ) {}
  async find(id: string): Promise<User | undefined> {
    return this.cache?.get<User>(id) ?? this.repo.findOne({ where: { id } });
  }
}

What gets formatted

Types: object types and interfaces get one member per line; long unions and intersections break before each | or &.
Generics: type parameters and arguments break like function arguments when they get long, defaults and extends constraints included.
Classes: parameter properties (private readonly repo), decorators, abstract members and overloads.
Modern syntax: satisfies, as const, optional chaining, ??=, import type and using declarations.

Prettier never changes what the code means: it doesn’t reorder imports, add or remove type annotations, or turn interface into type. Those are lint rules, not formatting.

Format TypeScript in your project

Shell

npm install --save-dev prettier
npx prettier --write "src/**/*.{ts,tsx}"
# In CI: fail if a file isn't formatted
npx prettier --check .

.prettierrc

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all"
}

Writing types for an API response? Paste the JSON into JSON to TypeScript or JSON to Zod and format the result here.

Frequently asked questions

Does the formatter check types?

No. It parses the code with the TypeScript parser and reprints it, so it catches syntax errors (a missing brace, a stray token) but not type errors like assigning a string to a number. For type checking run tsc --noEmit in your project.

Is TSX supported?

Yes. JSX inside .tsx files is formatted together with the TypeScript around it. One TSX quirk: a generic arrow function needs a trailing comma, <T,>(x: T) => x, so the parser doesn’t read <T> as a JSX tag, and Prettier keeps that comma.

Are decorators supported?

Yes, both the legacy experimentalDecorators syntax used by Angular and NestJS and the TC39 decorators that TypeScript 5 supports natively. Prettier keeps a decorator on the same line as a short class member and puts it on its own line otherwise, following how you wrote it.

Why are long union types split over several lines?

When a type doesn’t fit within the line width, Prettier puts each member of a union on its own line with a leading |. Raise the line width to 100 or 120 if your team prefers wider lines; that is the most common change from the defaults.

Should I use Prettier or ESLint to format TypeScript?

Use Prettier for layout and ESLint with typescript-eslint for code-quality rules like no-floating-promises. Turn off ESLint’s formatting rules with eslint-config-prettier so the two tools don’t fight over the same lines.