What formatting does, and what it never does
The formatter re-indents code, puts statements on their own lines, adds spaces around operators and after commas, and places braces where you choose. It reads your code as a stream of tokens and writes it back with new white space.
It does not add or remove semicolons, rename variables, reorder code, or change quotes. A line that had no semicolon still has none after formatting.
The beautifier works on tokens, so on its own it does not check syntax and cannot be sure it kept the meaning. That is why this page also reads your code with a JavaScript parser before and after formatting, and compares the two syntax trees. If they match, you see a note saying only the layout changed. If they do not, the page tries again with the plainest options. If that also differs, it tells you to compare the two before using the result.
The same parser reports the first syntax problem it finds, with its line and column, as a note under the result. The code is still formatted. Run your linter or tests for anything beyond syntax: this does not check logic, types or style rules.
Making minified JavaScript readable
Paste minified code and the formatter spreads it over lines and indents it, so you can follow the structure. Two things stay as they were: the short names a minifier chose (a, b, t), and any comments it removed. Formatting makes minified code readable, not understandable, because the original names are gone.
A source map, if one exists, is a better way to see the original code. This tool does not read source maps.
Style options
- Opening brace. Same line puts
{after the statement. Next line puts it on its own line. The third choice keeps{on the same line but startselseon a new line. - Wrap long lines. At 80 or 120 characters, long argument lists and expressions are broken over lines.
- Break method chains.
a.then().map()becomes one call per line. - Space after function. Writes
function ()instead offunction()for anonymous functions. - Keep blank lines. Keeps up to two blank lines where you had them, or removes them all.
JSX and TypeScript
JSX is not plain JavaScript, and a formatter that does not know it spaces the angle brackets out like comparison operators. Turn on Keep JSX tags as written and the tags are left exactly as you typed them while the code around them is laid out. A note appears when your code looks like it contains JSX and the option is off.
TypeScript is not supported. Type annotations and generics are not part of the syntax this formatter knows, so the result for TypeScript can be wrong.