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.