JavaScript Beautifier / Formatter
Formats JavaScript files with the chosen indentation level and brace style: collapsed, expanded or expanded with new line.
Result
About the JavaScript beautifier
This tool takes minified, compressed or simply messy JavaScript and rewrites it with consistent indentation, one statement per line and a predictable placement of braces. It is the natural companion of the JavaScript minifier: minify for production, beautify to read, debug or review. The beautifier understands modern syntax (ES2015+ classes, arrow functions, template literals, async/await, modules, optional chaining, JSX-free TypeScript-like code) and never executes or uploads your code.
Note that beautifying restores the layout but not the names: variables mangled by a minifier (a, b, t…) keep their short names, since the original ones are lost.
Brace styles
Collapsed (the usual JavaScript style)
if (a) {
b();
} else {
c();
}Expanded (Allman style)
if (a)
{
b();
}
else
{
c();
}Expanded new line
if (a) {
b();
}
else {
c();
}Keep as-is leaves each brace where you wrote it and only fixes the indentation.
Options
| Option | Effect |
|---|---|
| Indentation level | Spaces (or a tab) added for every block, object literal or continued expression. |
| Preserve existing line breaks | Keeps the blank lines you used to separate logical sections, up to the configured maximum in a row. Unchecked, blank lines are removed and only the structure decides where lines break. |
| Space before anonymous function parentheses | Writes function () instead of function(). |
| Keep array indentation | Leaves the indentation of multi-line array literals untouched, useful for hand-aligned matrices or lookup tables. |
| End with a newline | Adds a final line break, as required by many linters and POSIX tools. |
| Comma-first style | Puts the comma at the beginning of the next line in object literals, arrays and variable lists. |
Example
const users=[{name:"Ada",age:36},{name:"Linus",age:54}];function adults(list){return list.filter(u=>u.age>=18).map(u=>u.name)}console.log(adults(users));becomes:
const users = [{
name: "Ada",
age: 36
}, {
name: "Linus",
age: 54
}];
function adults(list) {
return list.filter(u => u.age >= 18).map(u => u.name)
}
console.log(adults(users));