Files
stack/packages/mosaic/framework/skills/antfu/references/antfu-eslint-config.md
T
fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
2026-08-19 14:37:17 -05:00

5.6 KiB

name, description
name description
antfu-eslint-config Configuring @antfu/eslint-config for framework support, formatters, and rule overrides. Use when adding React/Vue/Svelte/Astro support, customizing rules, or setting up VS Code integration.

@antfu/eslint-config

Handles both linting and formatting (no Prettier needed). Auto-detects TypeScript and Vue.

Style: Single quotes, no semicolons, sorted imports, dangling commas.

Configuration Options

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

export default antfu({
  // Project type: 'lib' for libraries, 'app' (default) for applications
  type: 'lib',

  // Global ignores (extends defaults, doesn't override)
  ignores: ['**/fixtures', '**/dist'],

  // Stylistic options
  stylistic: {
    indent: 2, // 2, 4, or 'tab'
    quotes: 'single', // or 'double'
  },

  // Framework support (auto-detected, but can be explicit)
  typescript: true,
  vue: true,

  // Disable specific language support
  jsonc: false,
  yaml: false,
});

Framework Support

Vue

Vue accessibility:

export default antfu({
  vue: {
    a11y: true,
  },
});
// Requires: pnpm add -D eslint-plugin-vuejs-accessibility

React

export default antfu({
  react: true,
});
// Requires: pnpm add -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh

Next.js

export default antfu({
  nextjs: true,
});
// Requires: pnpm add -D @next/eslint-plugin-next

Svelte

export default antfu({
  svelte: true,
});
// Requires: pnpm add -D eslint-plugin-svelte

Astro

export default antfu({
  astro: true,
});
// Requires: pnpm add -D eslint-plugin-astro

Solid

export default antfu({
  solid: true,
});
// Requires: pnpm add -D eslint-plugin-solid

UnoCSS

export default antfu({
  unocss: true,
});
// Requires: pnpm add -D @unocss/eslint-plugin

Formatters (CSS, HTML, Markdown)

For files ESLint doesn't handle natively:

export default antfu({
  formatters: {
    css: true, // Format CSS, LESS, SCSS (uses Prettier)
    html: true, // Format HTML (uses Prettier)
    markdown: 'prettier', // or 'dprint'
  },
});
// Requires: pnpm add -D eslint-plugin-format

Rule Overrides

Global overrides

export default antfu(
  {
    // First argument: antfu config options
  },
  // Additional arguments: ESLint flat configs
  {
    rules: {
      'style/semi': ['error', 'never'],
    },
  },
);

Per-integration overrides

export default antfu({
  vue: {
    overrides: {
      'vue/operator-linebreak': ['error', 'before'],
    },
  },
  typescript: {
    overrides: {
      'ts/consistent-type-definitions': ['error', 'interface'],
    },
  },
});

File-specific overrides

export default antfu(
  { vue: true, typescript: true },
  {
    files: ['**/*.vue'],
    rules: {
      'vue/operator-linebreak': ['error', 'before'],
    },
  },
);

Plugin Prefix Renaming

The config renames plugin prefixes for consistency:

New Prefix Original
ts/* @typescript-eslint/*
style/* @stylistic/*
import/* import-lite/*
node/* n/*
yaml/* yml/*
test/* vitest/*
next/* @next/next

Use the new prefix when overriding or disabling rules:

// eslint-disable-next-line ts/consistent-type-definitions
type Foo = { bar: 2 };

Type-Aware Rules

Enable TypeScript type checking:

export default antfu({
  typescript: {
    tsconfigPath: 'tsconfig.json',
  },
});

Config Composer API

Chain methods for flexible composition:

export default antfu()
  .prepend(/* configs before main */)
  .override('antfu/stylistic/rules', {
    rules: {
      'style/generator-star-spacing': ['error', { after: true, before: false }],
    },
  })
  .renamePlugins({
    'old-prefix': 'new-prefix',
  });

Less Opinionated Mode

Disable Anthony's most opinionated rules:

export default antfu({
  lessOpinionated: true,
});

Lint-Staged Setup

{
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}
pnpm add -D lint-staged simple-git-hooks
npx simple-git-hooks

VS Code Settings

Add to .vscode/settings.json:

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never",
  },
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true },
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
  ],
}