JS / TS Formatter & Minifier

about this tool

Formatting

Formatting is done by Prettier, using its Babel parser for JavaScript and its TypeScript parser for TypeScript, which is the same engine most editors run on save. Prettier and the parser download the first time you format rather than with the page, because together they are a few megabytes. Indent, wrap width, quote style and semicolons are yours; everything else is Prettier's opinion. It never changes what the code does, only how it is laid out.

The most common use is the reverse of minifying: paste a one-line production bundle to read it. Prettier will happily lay out code whose names have been shortened; the names stay short, but the structure comes back.

Minifying

Minifying is done by Terser, the minifier behind most JavaScript build tools. It parses the code properly, which is the only safe way: a text-level approach cannot tell a regular expression from a division, or know where JavaScript will insert a semicolon for you. Three things are under your control:

• Shorten names renames local variables, parameters and inner functions to one or two letters. Property names, globals and exports are never renamed, because something outside the file may depend on them. When the code has an import or export, it is treated as a module, so top-level names that are not exported are private and get shortened too; a note under the output says so.
• Compress folds constant expressions, removes unreachable code and debugger statements, and rewrites expressions to shorter equivalents. console calls stay. A template string whose every part is constant becomes a plain string, because the result is known; one with a runtime value stays a template.
• Comments keeps, by default, the ones that begin /*! or contain @license or @preserve, which is the convention for text that must survive minification. You can keep all comments or remove all of them.

Limits

Minify reads JavaScript only. TypeScript needs its types removed first, and doing that correctly takes a compiler far larger than this tool; Format does handle TypeScript as written. There are no source maps and no bundling: this is one file in, one file out. Very large files work, but the first run pays for downloading Prettier or Terser, and the page says "working…" while it does.

Errors

Both engines report a syntax error by line and column, shown under the input. Prettier's message names the unexpected token; Terser's names the token it found instead of what it wanted. TypeScript pasted under the JavaScript syntax fails at the first type annotation, which is the cue to switch the syntax selector rather than a fault in the code.

questions

Why will it not minify TypeScript?

Terser reads JavaScript, and type annotations are not JavaScript. Removing them properly needs a compiler of around ten megabytes, which is more than the rest of this site put together. Format handles TypeScript as it is; for minified output, compile to JavaScript first and minify that.

What does "shorten names" change, and what does it leave alone?

Local variables, parameters and function names inside a scope are renamed to one or two letters, since nothing outside can see them. Property names and anything global are kept, because other code might depend on them. Exported names are kept too: an export is public by definition.

Does compress remove my console.log calls?

No. Compress folds constants, removes unreachable code and debugger statements, and rewrites expressions to shorter equivalents, but it leaves console calls in place: they are usually there on purpose. A note under the output tells you when a debugger statement was removed.

Why did a template string turn into a plain string?

Because every part of it was constant, so Terser worked out the result. A template with a runtime value in it stays a template. Both are correct rewrites: the minified code produces exactly the same values as the original.

Can I get a source map, or bundle several files?

Neither. This is a single-file tool for reading minified code or shrinking a snippet; a build step with source maps belongs in your project, not in a browser tab. Every option here is one Terser or Prettier setting, and the defaults match theirs.