JavaScript Formatter & Minifier

Formatting & Standardising Modern JavaScript & TypeScript

JavaScript and TypeScript codebases require uniform formatting to maintain maintainability, streamline Git version control diffs, and ensure consistent code style across engineering teams. Formatters parse source code into an Abstract Syntax Tree (AST) and pretty-print it according to strict formatting rules.

Core JavaScript Formatting Standards

1. Indentation: 2 spaces (standard across React, Node.js, and Google Style Guide) or tabs for accessibility.
2. Semicolons: Explicit semicolons prevent Automatic Semicolon Insertion (ASI) bugs in edge cases.
3. Quotes: Single quotes ('string') or double quotes ("string"), applied consistently.
4. Trailing Commas: Trailing commas on multi-line object and array literals produce clean single-line Git diffs when items are added.

Formatting Rule	Inconsistent / Messy Code	Standardised Pretty-Printed Code
Trailing Commas	{ a: 1, b: 2 }	<pre>{
a: 1,
b: 2,
}</pre>
Arrow Function Parens	x => x * 2	(x) => x * 2
Bracket Spacing	{foo: 'bar'}	{ foo: 'bar' }
Binary Operators	const sum=a+b;	const sum = a + b;

---

AST-Based Formatting vs Regex Manipulation

Basic text search-and-replace often breaks JavaScript code by misinterpreting strings, regex literals, or template literals. Professional formatters (such as Prettier and Biome) parse code into an Abstract Syntax Tree (AST):

1. Lexical Analysis (Tokenisation): Decomposes characters into tokens (keywords, identifiers, operators).
2. Syntax Parsing: Builds a tree model representing program logic.
3. Pretty Printing: Discards original whitespace and prints the tree adhering strictly to line length limits.

---

Formatting JavaScript in Code

Node.js (Prettier API)

import * as prettier from 'prettier';

async function formatJS(code) {
  return await prettier.format(code, {
    parser: 'babel',
    semi: true,
    singleQuote: true,
    trailingComma: 'all',
    tabWidth: 2,
  });
}

const messy = "const add=(a,b)=>{return a+b};";
formatJS(messy).then(console.log);

---

Modern ECMAScript Features & Syntax Handling

• Optional Chaining & Nullish Coalescing: Formats deep access chains (user?.profile?.settings ?? defaultConfig) cleanly across multiline configurations.
• Decorators & TypeScript Type Annotations: Accurately aligns TypeScript interface definitions, generics, and experimental Stage 3 TC39 decorators without syntax disruption.
• JSX / TSX Element Formatting: Formats React components with consistent attribute indentation and clean closing bracket placement.

---

Production Tooling: Biome, ESLint & Prettier Integration

• Biome vs Prettier: Modern Rust-based formatters like Biome format JavaScript and TypeScript codebases up to 25x faster than Node.js runtimes, making them ideal for massive enterprise monorepos.
• Integrating with Git Pre-Commit Hooks: Running formatters via Husky and lint-staged ensures unformatted code is automatically beautified before commits are recorded in repository history.
• Formatting JSON & YAML Configurations: Consistent indentation rules apply equally to package.json, .eslintrc, and GitHub Actions workflow files.