About the JavaScript Pretty Print
A pretty printer differs from an indenter. Instead of adding whitespace to the lines you already wrote, it discards your line breaks entirely, rebuilds the code from its syntax tree, and decides where each break belongs based on the width you allow. That is why a chain of method calls that fits within the limit comes back on one line, while the same chain with one more argument is broken with each call on its own row.
The engine here is Prettier with the Babel parser, so modern syntax is understood: class fields, optional chaining, nullish assignment, dynamic import, generators, async iteration and JSX. Comments are carried to the node they belong to. Because the whole file must parse, a syntax error stops the run and is reported with its line and column, which makes this a strict check as well as a formatter.
Line width is the setting that changes the result most. Eighty columns suits a split editor and side by side reviews; a hundred and twenty gives long argument lists more room to stay together. Quote style, semicolons and trailing commas match the three options teams argue about most, so you can produce output that will not fight the project linter. The status line reports the line count and the longest line, a quick way to see whether the width you chose is doing anything.
If you would rather keep your own line breaks and only fix indentation, the JavaScript Formatter uses js-beautify and is more forgiving of code it cannot fully parse.
How to use
- Paste JavaScript on the left, or load the sample of tightly packed code.
- Set the Line width your project uses. This has more effect on the result than any other option.
- Choose Quotes, Semicolons and Trailing commas to match your linter.
- Check the status line for the line count and the longest line, then copy or download
pretty.js.
Common questions
- Why did my carefully placed line breaks disappear?
- A pretty printer reprints from the syntax tree and places breaks by line width, so original breaks are not preserved. Use the JavaScript Formatter if you want them kept.
- Does it support JSX and modern syntax?
- Yes. The Babel parser handles JSX, class fields, optional chaining, nullish coalescing, dynamic import and async iteration.
- What does the trailing comma setting change?
- ES5 adds trailing commas in arrays and objects only. All adds them to function parameters and calls too, which keeps diffs small in modern codebases. None removes them.
- Can it print code that has a syntax error?
- No. The file has to parse before it can be reprinted, so the error is reported with its line and column instead.