antfu

Configure Vue 3 projects with pnpm, strict TypeScript, and @antfu/eslint-config.

490|23|Updated Sep 25, 2023

Search Tags:#typescript #vitest #pnpm #vitepress #antfu #eslint-config

Ready to run

npx skills add https://github.com/victorgarciaesgi/regle --skill antfu-victorgarciaesgi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: antfu
Source: https://github.com/victorgarciaesgi/regle/tree/main/.agents/skills/antfu
Command: npx skills add https://github.com/victorgarciaesgi/regle --skill antfu-victorgarciaesgi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill codifies Anthony Fu's preferred web development practices into a reusable blueprint.

Core Features & Use Cases

Opinionated tooling and project setups (pnpm, strict TypeScript, ES Module)
Git hooks, linting, and unit testing conventions (simple-git-hooks, lint-staged, Vitest)
Documentation and monorepo guidance (VitePress, pnpm workspaces)
Reuse across teams to standardize DX and workflows

Quick Start

Apply these recommendations by aligning your project with Anthony Fu's preferences: set up pnpm workspaces in pnpm-workspace.yaml, enable TypeScript strict mode, adopt @antfu/eslint-config, configure Vitest and VitePress for docs, and centralize tooling in your monorepo.

Frequently Asked Questions about antfu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is Anthony Fu's opinionated web dev best practice setup for Vue 3?▼

Anthony Fu's web dev best practice setup standardizes Vue 3 projects using Vite, UnoCSS, and pnpm. It enforces TypeScript strict mode, ES modules, and standardized tooling with @antfu/eslint-config, Vitest, and VitePress.

How do I configure a pnpm monorepo with Vitest and VitePress?▼

To configure a pnpm monorepo, define workspaces in pnpm-workspace.yaml and centralize tooling. You then set up VitePress for documentation and configure Vitest to standardize testing conventions across the workspace.

Does the @antfu/eslint-config tooling support TypeScript strict mode?▼

Yes, adopting @antfu/eslint-config enforces TypeScript strict mode and ES module usage. It provides linting standards and integrates with simple-git-hooks and lint-staged to maintain code quality conventions.

What's the best way to standardize DX and workflows across Vue 3 teams?▼

The best way to standardize DX is applying a reusable blueprint that aligns projects with opinionated tooling. Teams adopt pnpm workspaces, strict TypeScript, @antfu/eslint-config, and VitePress to unify development workflows.

When do I need ES module usage and strict TypeScript for Vite projects?▼

You need ES module usage and strict TypeScript for Vite projects to enforce technical requirements and maintain consistency. This approach standardizes tooling, prevents type errors, and aligns with modern web development best practices.