JavaScript Formatter

What the JavaScript formatter does

Code that is written by several people, copied from a forum, or pulled out of a minified bundle is hard to read. Spacing differs from line to line, long chains run off the screen, and nested callbacks lose their shape. A formatter rewrites the layout of the code by one set of rules, so you can focus on what it does.

This page runs Prettier 3, a widely used open source code formatter, directly in your browser. The JavaScript parser is downloaded only when you first format something, and your code never leaves the page.

How to use it

1. Paste JavaScript or JSX into the left box. It is formatted right after you paste.
2. Or press Open file to load a .js file, or Sample to see an example.
3. Choose the options:
   • Indent: 2 spaces, 4 spaces or Tabs.
   • Line width: 80, 100, 120 or 160 characters before a line wraps.
   • Trailing commas: All, ES5 or None.
   • Single quotes: use 'text' instead of "text".
   • Semicolons: on adds them at the end of statements, off removes them where it is safe.
4. Press Format or Ctrl+Enter.
5. Press Copy, or Download to save a .js file.

After the first run, the output keeps up as you type, and changing an option reformats at once.

Before and after

Minified input:

const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}

After Format with the default options:

const total = (items) =>
  items
    .filter((i) => i.qty > 0)
    .reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  return res.json();
}

The arrow function parameter gets parentheses, the method chain is split one call per line because it does not fit in 80 characters, and the single quotes become double quotes. With Line width set to 100, the same chain fits on one line:

const total = (items) =>
  items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);

Quotes, semicolons and trailing commas

These three options cover most team style debates.

With Single quotes on and Semicolons off:

const name = 'Ada'
let list = [1, 2, 3]

Trailing commas decides whether the last item of a multi-line list or object gets a comma. All, the Prettier default, gives:

const user = {
  firstName: "Ada",
  lastName: "Lovelace",
  email: "[email protected]",
  role: "admin",
};

None removes the last comma after "admin". Trailing commas make diffs cleaner, because adding an item only changes one line. ES5 adds them in arrays and objects but not in function parameters, for very old environments.

JSX

React components are formatted too:

const App = () => (
  <div className="app">
    <h1>Hello</h1>
    <p>{name}</p>
  </div>
);

Syntax errors

If the code cannot be parsed, the formatter stops and tells you where. For an object with a missing comma:

const a = {
  b: 1
  c: 2
};

the message is Line 3, column 3: Unexpected token, expected ",". Press Show in input to jump to the spot. A function with a missing closing brace gives Line 3, column 1: Unexpected token, which points at the end of the input where the parser expected }.

The formatter does not run your code and does not lint it. Unused variables, wrong function names and logic mistakes are not reported.

Tips

• Agree on options once and write them in a .prettierrc file in your project, so editors and this page give the same result.
• Use the formatter before you read unfamiliar code. Layout that follows the structure makes nesting mistakes easy to see.
• For code with type annotations, use the TypeScript formatter. The JavaScript parser stops at the first : string.
• For data rather than code, the JSON formatter is stricter and also validates.

Other ways to format JavaScript

• VS Code: Format Document (Shift+Alt+F on Windows, Shift+Option+F on macOS). Install the Prettier extension and set it as the default formatter to match this page.
• Command line: npx prettier --write src/app.js, or npx prettier --check . in CI to fail a build when files are not formatted.
• Browser developer tools: the pretty print button in the Sources panel makes minified scripts readable while you debug.

Scripts inside an HTML page can be formatted together with the markup in the HTML formatter.