About the Babel Formatter
The Babel parser is the most permissive JavaScript grammar in wide use, which is why this page uses it. Source that a stricter parser refuses will still be formatted here: static and instance class fields, hash private members such as #rows, top level await, numeric separators, optional chaining and nullish coalescing all parse cleanly, and JSX in the same file is accepted without a separate mode.
Formatting is a full reprint from the syntax tree rather than a whitespace patch. That means the output is deterministic. Run it twice and the second pass changes nothing, which makes it safe to use as a pre commit step by hand. Chained calls break onto separate lines once they pass the width you set, arguments are grouped, and a trailing comma is added in multi line lists so diffs stay small.
Two switches change the house style. Turn Semicolons off for a semicolon free codebase, and set Quotes to single if that is what your linter expects. Strings that contain the preferred quote character keep the other one so nothing needs escaping.
If your file is TypeScript rather than plain JavaScript, the TypeScript Formatter parses type annotations properly. To shrink a finished bundle instead of formatting it, use the JavaScript Minifier.
How to use
- Paste a JavaScript module into the left pane, or press Sample to load a class that uses static and private fields.
- Choose an Indent width and a Max line width. Prettier defaults are 2 and 80.
- Set Semicolons and Quotes to match the rest of your project.
- A parse failure is reported with the exact line and column. Fix that spot and the output reappears.
- Press Copy or Download when the result looks right.
Common questions
- What is the difference between this and a plain JavaScript beautifier?
- A beautifier adjusts whitespace around the code it recognises. This page rebuilds the file from a parsed syntax tree, so line breaks and wrapping are chosen for you and the output is identical every time.
- Can it format code with decorators?
- Decorators on classes and class members parse with the Babel grammar used here. Very new proposal syntax that Babel has not stabilised may still be rejected.
- Does formatting change what my code does?
- No. Only whitespace, quote style, line breaks and optional semicolons and trailing commas change. Every identifier, literal and comment is preserved.
- Why does my Flow annotated file fail?
- Flow type syntax needs the Flow parser. Remove the annotations or use a Flow aware editor plugin; this page targets standard JavaScript and JSX.