About

Unformatted JavaScript fails code review. Minified bundles, transpiled Babel output, and hastily written ES6+ modules produce code that is syntactically valid but structurally unreadable. This tool reconstructs indentation hierarchy by analyzing bracket depth, statement boundaries, and operator context across modern syntax including arrow functions (=>), template literals, destructuring assignments, optional chaining (?.), and nullish coalescing (??). It does not execute or transpile code. It tokenizes the input character-by-character and rebuilds whitespace according to configurable rules.

Limitation: this formatter operates on token-level heuristics, not a full AST. It handles 95% of well-formed JavaScript correctly but may misformat edge cases involving regex literals adjacent to division operators or deeply nested ternaries inside template expressions. For production pipelines, pair this with ESLint. For quick formatting of Babel output, Stack Overflow snippets, or console dumps, this tool is sufficient and requires zero installation.

Formulas

The formatter operates on a token stream, not an abstract syntax tree. Each character is classified into a token type, and indentation depth d is tracked as a simple integer counter.

Indentation Logic:

d ← d + 1 when token ∈ { {, [, ( }

d ← max(d − 1, 0) when token ∈ { }, ], ) }

Line prefix = indentChar^d where indentChar = spaces or tab

Where d = current indentation depth (integer ≥ 0), indentChar = repeated whitespace unit (configurable: 2 or 4 spaces, or 1 tab). The formatter scans left-to-right in O(n) time where n is the character count of the input source.

Reference Data

Feature / Syntax	ES Version	Token Type	Formatting Rule
Arrow Functions =>	ES6 (2015)	Operator	Space before & after arrow
Template Literals `...${}`	ES6 (2015)	String (special)	Preserve internal whitespace
Destructuring { a, b }	ES6 (2015)	Bracket group	Spaces inside braces
Spread/Rest ...	ES6 (2015)	Operator	No space after dots
const / let	ES6 (2015)	Keyword	Newline before declaration
class / extends	ES6 (2015)	Keyword	Newline before class, space after
import / export	ES6 (2015)	Keyword	Own line, space in braces
async / await	ES2017	Keyword	Space after keyword
Optional Chaining ?.	ES2020	Operator	No surrounding spaces
Nullish Coalescing ??	ES2020	Operator	Space before & after
Logical Assignment ??=	ES2021	Operator	Space before & after
Private Fields #field	ES2022	Identifier	Treat as normal identifier
Top-level await	ES2022	Keyword	Standard await rules
Single-line Comment //	ES1	Comment	Preserve, own line or inline
Multi-line Comment /* */	ES1	Comment	Preserve internal newlines
RegExp Literal /pattern/flags	ES3	Regex	Preserve as-is
JSX Self-closing <Comp />	JSX	JSX tag	Space before />
JSX Expression {expr}	JSX	JSX expression	No padding inside braces
Semicolons	All	Punctuation	Configurable: insert or omit
Trailing Commas	ES2017+	Punctuation	Configurable: add or remove
Quote Style	All	String delimiter	Configurable: single or double

Frequently Asked Questions

The tokenizer uses context heuristics. If the / character appears after a value-producing token (identifier, number, closing bracket), it is treated as division. After operators, keywords (return, typeof), or opening brackets, it begins a regex literal. This covers most cases but may fail on ambiguous constructs like x /regex/ where a semicolon would clarify intent.

No. The formatter only modifies whitespace, indentation, and optionally quote style or semicolons. It does not rename variables, reorder statements, or alter logic. If you enable semicolon insertion, be aware that JavaScript's Automatic Semicolon Insertion (ASI) rules mean removing semicolons from lines ending in ) before a newline starting with ( can change behavior. The tool inserts conservatively to avoid this.

The tokenizer recognizes JSX angle-bracket syntax (<Component>) when it appears in expression position (after return, =, (, or ,). It indents nested JSX elements and preserves expression braces {} inline. However, it does not validate JSX semantics - unclosed tags will produce malformed output.

Template literals (backtick strings) are treated as atomic tokens. The formatter preserves all internal whitespace and newlines within them. Expressions inside ${...} are formatted only at the top level of the interpolation; deeply nested template literals may not receive full formatting. This is by design - modifying whitespace inside template literals would change string output at runtime.

Chained calls like .then() or .map() starting on a new line receive one additional indent level relative to the chain origin. The formatter detects a dot . at line start and adds 1 extra indent. When the chain ends (next statement or closing bracket), depth returns to the base level.

The formatter processes up to 500KB of source code. Beyond this, browser tab memory pressure increases and formatting may take several seconds. For files larger than 200KB, a progress indicator appears. The practical sweet spot is under 50KB for instant results.