Antfu Coding Style

Antfu Coding Style & Philosophy

> Goal: Maximal Developer Experience (DX) through minimalism and smart defaults. "Works out of the box."

1. Code Organization

• Single Responsibility: Keep files small. If you scroll too much, split it.
• Export: Use Named Exports for libraries, Default Exports for components.
• Constants: Extract magic strings/numbers to constants.ts.

2. TypeScript Preferences

• Implicit over Explicit: Let TS infer types when obvious.
• *Bad*: const count: number = 0
• *Good*: const count = 0
• Return Types: Explicitly type return values for library limits (public API), infer for internal functions.
• No Enums: Use const assertion object or String Unions.
• type Mode = 'dark' | 'light' > enum Mode { ... }

3. Tooling Stack

• Package Manager: pnpm (Fast, disk efficient).
• Runner: ni (NPM/Yarn/PNPM/Bun Agnostic runner).
• ni -> install
• nr dev -> run dev
• nu -> upgrade
• Testing: Vitest (Fast, Jest compatible, Native ESM).
• Naming: *.test.ts.
• Verification: Use toMatchSnapshot() sparingly, prefer toMatchInlineSnapshot().

4. CSS / Styling

• UnoCSS: Atomic CSS engine.
• Attributify: Use attributes for styles to keep clean class strings.
• <div text="red 4xl" hover="text-blue"> (Controversial but preferred by Antfu for clean template).

5. Vue.js Specifics

• Script Setup: <script setup lang="ts">.
• ReactivityTransform: Previously experimental, now prefer ref with .value or explicit .value macros if configured.
• Structure:
• defineProps and defineEmits at the top.
• watch / computed grouped together.

The "Antfu" Vibe:

• Delete dead code immediately.
• If it can be automated, write a script.
• Aesthetics matter: Code should look beautiful.