/references/antfu-eslint-config.md

name, description

name	description
antfu-eslint-config	配置 @antfu/eslint-config 以支持框架、格式化程序和规则覆盖。用于添加 React/Vue/Svelte/Astro 支持、自定义规则或设置 VS Code 集成。

@antfu/eslint-config

同时处理代码检查与格式化（无需 Prettier）。自动检测 TypeScript 和 Vue。

风格：单引号、无分号、导入排序、尾随逗号。

配置选项

import antfu from '@antfu/eslint-config'

export default antfu({
  // 项目类型：'lib' 表示库，'app'（默认值）表示应用程序
  type: 'lib',

  // 全局忽略（扩展默认值，不会覆盖）
  ignores: ['**/fixtures', '**/dist'],

  // 风格选项
  stylistic: {
    indent: 2,        // 2、4 或 'tab'
    quotes: 'single', // 或 'double'
  },

  // 框架支持（自动检测，也可手动指定）
  typescript: true,
  vue: true,

  // 禁用特定语言支持
  jsonc: false,
  yaml: false,
})

框架支持

Vue

Vue 无障碍支持：

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

React

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

Next.js

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

Svelte

export default antfu({
  svelte: true,
})
// 需要：pnpm add -D eslint-plugin-svelte

Astro

export default antfu({
  astro: true,
})
// 需要：pnpm add -D eslint-plugin-astro

Solid

export default antfu({
  solid: true,
})
// 需要：pnpm add -D eslint-plugin-solid

UnoCSS

export default antfu({
  unocss: true,
})
// 需要：pnpm add -D @unocss/eslint-plugin

格式化程序（CSS、HTML、Markdown）

用于处理 ESLint 原生不支持的文件：

export default antfu({
  formatters: {
    css: true,      // 格式化 CSS、LESS、SCSS（使用 Prettier）
    html: true,     // 格式化 HTML（使用 Prettier）
    markdown: 'prettier' // 或 'dprint'
  }
})
// 需要：pnpm add -D eslint-plugin-format

规则覆盖

全局覆盖

export default antfu(
  {
    // 第一个参数：antfu 配置选项
  },
  // 后续参数：ESLint 扁平配置
  {
    rules: {
      'style/semi': ['error', 'never'],
    },
  }
)

按集成覆盖

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

按文件覆盖

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

插件前缀重命名

该配置对插件前缀进行统一重命名：

新前缀	原前缀
ts/*	@typescript-eslint/*
style/*	@stylistic/*
import/*	import-lite/*
node/*	n/*
yaml/*	yml/*
test/*	vitest/*
next/*	@next/next

覆盖或禁用规则时，请使用新前缀：

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

类型感知规则

启用 TypeScript 类型检查：

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

Config Composer API

链式调用方法以实现灵活组合：

export default antfu()
  .prepend(/* 主配置之前的配置 */)
  .override('antfu/stylistic/rules', {
    rules: {
      'style/generator-star-spacing': ['error', { after: true, before: false }],
    }
  })
  .renamePlugins({
    'old-prefix': 'new-prefix',
  })

轻度固执己见模式

禁用 Anthony 最个性化的规则：

export default antfu({
  lessOpinionated: true
})

Lint-Staged 设置

{
  "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 设置

添加到 .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"
  ]
}