Modern TypeScript Formatting & Prettier Conventions
TypeScript powers large-scale enterprise frontends and Node.js backend microservices. With features like utility types (Partial<T>, Record<K, V>), complex generics, union discriminators, and JSX/TSX syntax, unformatted TypeScript quickly causes cognitive overhead. Enforcing standard 2-space Prettier conventions ensures uniform git diffs and effortless code reviews across teams.
Standard 2-Space Indentation
The modern TypeScript and React ecosystem universally adopts 2 spaces per indentation level. This keeps deeply nested object configurations, callbacks, and TSX component trees compact.
Interface & Type Structuring
Proper indentation clarifies the distinction between type definitions, method signatures, and implementations, particularly when working with nested object types and generic constraints.
TypeScript Style Guidelines: Prettier Standards vs. Common Habits
| Construct | Unformatted / Irregular | Beautified Standard | Formatting Rule |
|---|---|---|---|
| Interface Definition | interface User<T>{ id:string; data:T; } |
interface User<T> { id: string; data: T; } |
Space before opening brace; 2-space member indent. |
| Async Service Call | async function fetchUser(){ const res=await api(); return res.json(); } |
async function fetchUser() { const res = await api(); return res.json(); } |
Space before body brace; indented statements. |
| Brace Placement | class AuthService { login() {} } |
class AuthService { login() {} } |
Opening braces ({) stay on the same line (OTBS / 1TBS style). |
Frequently Asked Questions
What indentation style does this TypeScript formatter follow?
By default, it follows standard TypeScript, Prettier, and Airbnb community conventions, utilizing 2 spaces per indentation level without hard tabs.
Does it support TypeScript interfaces, generics, and template literals?
Yes. It balances nested delimiter hierarchies ({, }, (, ), [, ]), aligning nested interface definitions, generic signatures, object literals, and template strings (`...`).
Is my proprietary TypeScript source code sent to a remote server?
No. The formatting engine operates 100% locally in your browser using JavaScript lexical analysis. Zero code or telemetry is transmitted across the network.