JavaScript formatter — beautify JS and TypeScript with Prettier

How to use the JavaScript formatter

1. Paste your code into the JavaScript box.
2. Tick Code is TypeScript if it contains type annotations.
3. Set Indent (2 spaces, 4 spaces or Tabs), Quotes (double or single) and whether to use Semicolons.
4. Choose Trailing commas (wherever valid, ES5 style or none) and a Line width; 80 characters is Prettier’s default.
5. Copy the Formatted code or download it as formatted.js (or formatted.ts).

What it does and when to use it

The formatter turns cramped or inconsistent code into a clean, predictable layout. It is useful when you paste a snippet from a forum or chat, read code copied out of a minified file, tidy an old script before editing it, or want to see how Prettier would format your code before adding it to a project.

Prettier is an “opinionated” formatter: it makes most layout decisions itself, so two people formatting the same code get the same result. The options here cover the settings teams most often change.

Before sharing code, the JavaScript validator also flags problems that still parse, such as a variable declared twice with let. When the code is ready to ship, the JavaScript minifier shrinks it again, and the JSON formatter handles data files.

How it works

The tool loads Prettier’s standalone build and its Babel parser into the page the first time you use it. Your code is parsed into a syntax tree (with the babel-ts parser when TypeScript is ticked), then Prettier prints the tree back out, fitting expressions within the line width. Long chains are broken one call per line; short objects stay on one line. If parsing fails, the tool shows the parser’s message with the line and column and a marker under the problem.

Worked examples

These outputs come from the formatter with default settings.

Squashed code. const a={b:1,c:[1,2]};function f(x){return x*2} becomes:

const a = { b: 1, c: [1, 2] };
function f(x) {
  return x * 2;
}

A long method chain. const total=items.filter(i=>i.active).map(i=>i.price*i.qty).reduce((a,b)=>a+b,0) is too long for one line, so Prettier breaks it at each call and adds brackets around arrow function parameters:

const total = items
  .filter((i) => i.active)
  .map((i) => i.price * i.qty)
  .reduce((a, b) => a + b, 0);

A syntax error. function (x { returns “Syntax error — line 1, column 10: Unexpected token”, pointing at the missing name and bracket.

Limits and tips

• Comments are kept, but Prettier may move them slightly when it reflows a line.
• Very long files can take a moment, because parsing runs on your device.
• Project settings win. If your project has a .prettierrc file, use the same options here, or run Prettier in your editor for consistent results.
• Formatting does not catch logic bugs or undefined variables; a linter such as ESLint does that.