Hunt
Skip to content

JavaScript / TypeScript Formatter

Paste JavaScript, TypeScript, JSX or TSX to format it with Prettier, the formatter most JavaScript projects use. Set the line width, indentation, semicolons, quotes and trailing commas to match your project. Formatting runs in your browser, so your code is never uploaded.

Runs in your browser

Code

Paste code or press Sample

Formatted

Formatted code will appear here

What Prettier does

Prettier reprints your code from scratch in one consistent style: it parses the code, then lays it out to fit the line width, choosing where to break lines, indent and add parentheses. It doesn't change what the code does. Because almost every choice is made for you, teams stop arguing about style, and diffs only show real changes.

This tool uses Prettier 3 with its default options, so the output matches npx prettier --write in a project without a Prettier configuration. Change the options to match your project's .prettierrc.

How to use the JavaScript / TypeScript Formatter

  1. Paste your code, or press Sample.
  2. Choose JavaScript / JSX or TypeScript / TSX.
  3. Set the line width, indent, semicolons, quotes and trailing commas to match your project.
  4. Copy the formatted code or download it.

Examples

Minified JavaScript

Input
const total=items.reduce((sum,{price,qty})=>sum+price*qty,0);if(total>100){applyDiscount(total,"SAVE10")}
Output
const total = items.reduce((sum, { price, qty }) => sum + price * qty, 0);
if (total > 100) {
  applyDiscount(total, "SAVE10");
}

TypeScript with single quotes and no semicolons

Input
interface User{id:number;name:string}
export const greet=(u:User):string=>`Hello, ${u.name}`
Output
interface User {
  id: number
  name: string
}
export const greet = (u: User): string => `Hello, ${u.name}`

Without semicolons, Prettier still adds one where leaving it out would change the meaning, such as before a line starting with ( or [.

A long JSX element

Input
<Button variant="primary" size="large" onClick={() => save(draft)} disabled={!draft.title}>Save draft</Button>
Output
<Button
  variant="primary"
  size="large"
  onClick={() => save(draft)}
  disabled={!draft.title}
>
  Save draft
</Button>;

The element is longer than 80 characters, so each attribute goes on its own line.

JavaScript or TypeScript?

Choose JavaScript / JSX for .js, .jsx, .mjs and .cjs files, including modern syntax and React components. Choose TypeScript / TSX for .ts and .tsx: type annotations, interfaces, generics and enums are syntax errors in JavaScript.

Syntax errors

Prettier can only format code it can parse. If your code has a syntax error, such as a missing bracket, the tool shows the parser's message and the line and column; select the location to jump to it.

Options

Language
JavaScript / JSX, or TypeScript / TSX.
Line width
The line length Prettier tries to stay within: 80 (the default), 100 or 120.
Indent
2 spaces (the default), 4 spaces or tabs.
Semicolons
Add semicolons at the end of statements (on by default).
Single quotes
Use single quotes for strings instead of double quotes, except where it would need more escaping.
Trailing commas
All (the default) adds them wherever valid, including function parameters; ES5 only in arrays and objects; None removes them.

Limitations

  • Prettier's default plugins only: no plugins such as import sorting or Tailwind class sorting.
  • Flow type annotations are formatted with the JavaScript parser where Prettier supports them.
  • Inputs up to a few megabytes; very large files take longer.

Frequently asked questions

Is my code uploaded?

No. Prettier runs in a background thread in your browser; your code is never sent anywhere.

Will the output match Prettier in my project?

Yes, if the options match your .prettierrc and your project uses Prettier 3 without plugins. The version used here is shown in the page source; minor versions can differ slightly in edge cases.

Can it minify code?

No. Prettier makes code readable; minifying is the opposite. Use a minifier such as Terser or esbuild for that.

Why did it change my line breaks?

Prettier ignores most original formatting and reprints code to fit the line width. Two exceptions: it keeps blank lines between statements (collapsing several into one), and it keeps objects expanded if there's a line break after the opening brace.