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.