JavaScript Pretty Print with Prettier

What JavaScript pretty print means on this page

This JavaScript pretty print tool runs Prettier in your browser. Prettier is an opinionated formatter: it reads the code into a syntax tree, throws away the original spacing and line breaks, and prints the program again under a fixed set of rules. You choose a handful of settings, and Prettier decides everything else. That is the point for teams: once everyone formats with the same settings, style stops being a topic in code review.

Need to keep your own layout, pick a brace style, or minify the result? Use the JavaScript Formatter instead. It runs js-beautify, which adjusts whitespace around the code you wrote and offers more layout switches, but it does not enforce a single style.

Three layouts in, one layout out

Here are three ways a developer might write the same line:

const total = items.filter(i => i.active).map(i => i.price * i.qty)

const total=items.filter(i=>i.active).map(i=>i.price*i.qty)

const total = items
  .filter((i) => i.active)
        .map((i) =>
   i.price * i.qty);

Prettier prints all three identically:

const total = items.filter((i) => i.active).map((i) => i.price * i.qty);

The beautifier on the main page keeps what it is given. The first two inputs come back as one line without a semicolon or parentheses around i, and the third keeps its line breaks and gets re-indented:

const total = items
    .filter((i) => i.active)
    .map((i) =>
        i.price * i.qty);

This is the practical difference. A beautifier makes code readable; Prettier makes it uniform, so a diff only shows real changes.

Side by side with the configurable beautifier

The same minified object, formatted by both engines with their page defaults:

const cfg={retries:3,endpoints:['/api/users','/api/orders'],onError:function(err){console.error('Request failed:',err.message)}}

JavaScript Pretty Print (Prettier, 2 spaces):

const cfg = {
  retries: 3,
  endpoints: ["/api/users", "/api/orders"],
  onError: function (err) {
    console.error("Request failed:", err.message);
  },
};

JavaScript Formatter (js-beautify, 4 spaces, Collapse braces):

const cfg = {
    retries: 3,
    endpoints: ['/api/users', '/api/orders'],
    onError: function(err) {
        console.error('Request failed:', err.message)
    }
}

For example, const a = {b:1 is rejected with Unexpected token, expected "," on line 1, while the beautifier prints a half-open object without complaint.

The four options and their .prettierrc names

Only four Prettier options are exposed. Each maps to a key you can put in a project configuration file:

Line width drives most layout decisions. The call sendWelcomeEmail(user.email, "Welcome aboard", { template: "onboarding", priority: "high" }); stays on one line at 120, hugs the object at 80, and at 40 becomes:

sendWelcomeEmail(
  user.email,
  "Welcome aboard",
  {
    template: "onboarding",
    priority: "high",
  },
);

Semicolons off does not simply delete them. Where a line starts with [ or (, Prettier keeps a leading semicolon so the statement cannot merge with the one above:

const a = b
;[1, 2].forEach((n) => log(n))

Single quotes is a preference, not a rule: 'it\'s' is printed as "it's" because that needs no escape. Everything else, such as trailingComma: "all", bracketSpacing: true and LF line endings, stays at Prettier's defaults.

Getting the same result locally

To make this output the team standard, add Prettier to the project and commit a configuration that mirrors the settings you tested here:

npm install --save-dev --exact prettier

{
  "tabWidth": 2,
  "printWidth": 80,
  "semi": true,
  "singleQuote": false
}

Save the second block as .prettierrc in the repository root. Then run npx prettier . --write to format everything once, and npx prettier . --check in continuous integration to fail builds that were not formatted. Pinning the exact version matters, because formatting rules can change between Prettier releases and two developers on different versions would get different output. Most editors can run Prettier on save through an extension or built-in support, and they read the same .prettierrc, so the editor, the CLI and this page agree.

When the output does not match your project

• Different trailing commas or arrow parentheses. The project config probably sets trailingComma or arrowParens, which this page does not expose.
• Type annotations fail to parse. The page uses the Babel parser for JavaScript and JSX. Paste TypeScript into the TypeScript Formatter.
• React components. JSX works here, and the React JSX Formatter runs the same Prettier setup with a component sample.
• Unsure where the syntax error is. The JavaScript Validator reports problems without reformatting anything.

The code is formatted in your browser and is not uploaded.