How to Format JavaScript: AST-Driven Code Formatting, ASI Traps, and Prettier Standards

The Evolution of JavaScript Formatters

Modern JavaScript and TypeScript formatting has moved away from subjective stylistic debates toward automated, Abstract Syntax Tree (AST)-driven formatters like Prettier and Biome. These tools parse source code into an in-memory AST and regenerate the entire output from scratch according to mathematical print width rules (typically 80 or 100 characters).

Automatic Semicolon Insertion (ASI) Traps

JavaScript automatically inserts semicolons at line boundaries according to complex grammar rules. Omitting semicolons can lead to catastrophic bugs when lines start with parenthesis (, brackets [, or backticks `` ```:

// BUG SCENARIO: The return statement returns 'undefined'!
function getUserData() {
  return
  {
    name: 'Alex Rivera', // ASI inserts ';' immediately after 'return'
    role: 'Lead'
  };
}

// BUG SCENARIO: Array indexing interpreted as function call
const a = 1
const b = 2
[a, b].forEach(console.log) // JavaScript evaluates as: const b = 2[a, b] -> TypeError!

Destructuring & Async/Await Formatting Standards

When destructuring more than two properties or handling complex asynchronous chains, format entries on separate lines for visual clarity:

// Multiline object destructuring with TypeScript types
const {
  sessionId,
  peerPublicKey,
  bandwidthThrottleKbps,
  onProgressCallback
}: TransferSessionConfig = options;

// Clean Async/Await pipeline formatting
export async function initializePeerConnection(config: PeerConfig): Promise<RTCPeerConnection> {
  const pc = new RTCPeerConnection(config.iceServers);
  
  pc.onicecandidate = (event) => {
    if (event.candidate) {
      signalingSocket.send({ type: 'candidate', candidate: event.candidate });
    }
  };

  return pc;
}

Trailing Commas & Clean Git Diffs

Always configure multiline arrays, objects, and function parameters with trailing commas ("trailingComma": "all"). Adding a new property in a git commit modifies only the newly added line without touching previous lines, resulting in clean pull request diffs and zero merge conflicts.

Prettier & Biome Production Configurations

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "all",
  "arrowParens": "always",
  "bracketSpacing": true
}

ESLint vs Prettier: Defining Boundaries