Antfu

Antfu is a community skill for following Anthony Fu coding conventions and tooling preferences, covering ESLint configuration, Vue and TypeScript patterns, monorepo setup, open source project scaffolding, and opinionated development workflow standards.

What Is This?

Overview

Antfu provides patterns aligned with Anthony Fu developer conventions used across popular open source projects. It covers ESLint configuration using the @antfu/eslint-config flat config with opinionated formatting and import ordering rules, Vue and TypeScript patterns including script setup components, auto-imports, and type-safe composables, monorepo setup with pnpm workspaces and shared configuration packages, open source project scaffolding with consistent README structure, contributing guidelines, and release automation, and development workflow standards using tools like bumpp, unbuild, and vitest for building and testing. The skill enables developers to adopt conventions from the antfu ecosystem.

Who Should Use This

This skill serves developers using @antfu/eslint-config and wanting consistent code style across projects, Vue and TypeScript developers adopting antfu-style patterns for composables and auto-imports, and open source maintainers following antfu project structure conventions.

Why Use It?

Problems It Solves

ESLint configuration sprawl with dozens of plugins and conflicting rules is difficult to maintain. Vue component patterns vary across projects without established conventions. Monorepo setup requires coordinating build tools, shared configs, and workspace dependencies. Open source project scaffolding is recreated from scratch for each new repository.

Core Highlights

Flat ESLint config provides formatting, imports, and TypeScript rules in a single package. Auto-import patterns eliminate manual import statements for common utilities and Vue APIs. Monorepo conventions organize packages with shared configuration and coordinated publishing. Release automation handles version bumping, changelog generation, and npm publishing.

How to Use It?

Basic Usage

// eslint.config.ts
import antfu from
  '@antfu/eslint-config';

export default antfu({
  // Enable Vue support
  vue: true,
  // Enable TypeScript
  typescript: true,
  // Style preferences
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: false,
  },
  // Ignore patterns
  ignores: [
    'dist',
    'node_modules',
    '*.min.js',
  ],
}, {
  // Custom rule overrides
  rules: {
    'no-console':
      ['warn', {
        allow: ['warn',
          'error'] }],
    'vue/block-order': [
      'error', {
        order: ['script',
          'template',
          'style'] }],
  },
});

Real-World Examples

// Vue composable - antfu style
import { ref, computed,
  onMounted } from 'vue';

export function useDark() {
  const isDark = ref(false);

  const toggle = () => {
    isDark.value =
      !isDark.value;
    document
      .documentElement
      .classList.toggle(
        'dark', isDark.value);
  };

  onMounted(() => {
    isDark.value =
      document
        .documentElement
        .classList
        .contains('dark');
  });

  return {
    isDark: computed(
      () => isDark.value),
    toggle,
  };
}

// package.json scripts
// - antfu convention
// {
//   "scripts": {
//     "build":
//       "unbuild",
//     "dev":
//       "unbuild --stub",
//     "test":
//       "vitest",
//     "lint":
//       "eslint .",
//     "release":
//       "bumpp && npm publish"
//   }
// }

Advanced Tips

Use the eslint config inspector at localhost to visualize which rules apply to each file pattern. Enable the unocss option in the ESLint config for utility-first CSS class sorting and validation. Configure auto-imports with unplugin-auto-import to skip manual imports for Vue composition API functions and custom composables.

When to Use It?

Use Cases

Set up a new Vue and TypeScript project with antfu ESLint config for consistent formatting without Prettier. Configure a pnpm monorepo with shared ESLint and TypeScript configuration packages. Scaffold an open source library with unbuild, vitest, and automated release workflow.

Related Topics

ESLint configuration, Vue development, TypeScript conventions, monorepo setup, and open source tooling.

Important Notes

Requirements

Node.js 18 or later for ESLint flat config support. pnpm for workspace management in monorepo setups. @antfu/eslint-config package installed as a dev dependency.

Usage Recommendations

Do: use the flat ESLint config format as it replaces the legacy .eslintrc approach. Enable the stylistic option to handle formatting without a separate Prettier setup. Follow the convention of exporting composables with use prefix and returning reactive refs.

Don't: mix @antfu/eslint-config with Prettier as the config handles formatting through ESLint stylistic rules. Override core rules without understanding their purpose in the configuration. Use the legacy eslintrc format which is not supported by this config.

Limitations

The opinionated defaults may conflict with team preferences on formatting choices like semicolons and quote style. Some project-specific ESLint plugins may need manual integration alongside the flat config. Auto-import patterns can make code harder to understand for developers unfamiliar with the convention.