Babel Formatter

Babel Formatter – Prettier with the Babel Parser

Babel is the compiler that made modern JavaScript usable everywhere, and its parser is what Prettier uses for JavaScript by default. This Babel formatter lets you pick the exact Babel flavour: babel for standard ES2025 + JSX, babel-flow for code with Flow type annotations, or babel-ts for TypeScript parsed through Babel (the way @babel/preset-typescript sees it).

When to choose which parser

• babel – the right choice for most JavaScript: ES modules, async/await, class fields, optional chaining, JSX.
• babel-flow – for React Native and older Facebook-style projects that use // @flow and type annotations like function f(x: number): string.
• babel-ts – for TypeScript that is compiled by Babel instead of tsc. It accepts the same syntax as the TypeScript Beautifier but reports errors the way Babel does.

Style options

Set indentation, line width, semicolons, quote style, and trailing commas. These are the same options you would put in a .prettierrc, so you can reproduce your project's settings exactly and paste the result straight into a pull request.

Why parse instead of re-indent?

Simple beautifiers only insert line breaks after braces and semicolons. That breaks on regular expressions, template literals, and arrow functions that return objects. A real parser understands every construct, so the formatter never confuses a / division with a regex or changes a string. If the code does not parse, you get the error position instead of corrupted output.

Related tools

Use the JavaScript Beautifier for a no-options quick format, the JSX Formatter for component markup, and the JS Minifier when you need the smallest possible output for production. To check syntax without formatting, try the JavaScript Validator.