从零开始开发ESLint共享配置：参考@antfu/eslint-config架构-优快云博客

从零开始开发ESLint共享配置：参考@antfu/eslint-config架构

【免费下载链接】eslint-config Anthony's ESLint config preset 项目地址: https://gitcode.com/GitHub_Trending/es/eslint-config

你是否曾为项目中混乱的代码风格而头疼？是否在团队协作时因编码规范不统一而浪费大量时间？本文将带你从零开始构建一个专业的ESLint共享配置，参考Anthony Fu的@antfu/eslint-config架构，让你的代码质量提升一个台阶。读完本文，你将掌握模块化配置设计、多框架支持、自动化测试等核心技能，轻松打造企业级ESLint配置方案。

ESLint共享配置的价值与应用场景

在现代前端开发中，代码质量和一致性至关重要。ESLint作为JavaScript生态系统中最流行的代码检查工具，通过共享配置（Shareable Config）功能，让开发者可以轻松复用经过验证的规则集。@antfu/eslint-config作为社区广泛使用的配置方案，其架构设计具有高度的可扩展性和灵活性，支持JavaScript、TypeScript、React、Vue等多种场景。

项目的核心文件结构如下：

src/
├── configs/           # 模块化配置文件
├── factory.ts         # 配置工厂函数
├── index.ts           # 入口文件
└── plugins.ts         # 插件管理

通过这种架构，可以实现配置的按需加载和灵活组合，满足不同项目的个性化需求。

@antfu/eslint-config架构深度解析

核心架构设计

@antfu/eslint-config的核心在于其模块化配置系统和配置工厂函数。在src/factory.ts中，antfu()函数作为配置入口，通过选项参数动态组合不同的配置模块：

export function antfu(
  options: OptionsConfig = {},
  ...userConfigs: Awaitable<TypedFlatConfigItem>[]
): FlatConfigComposer {
  // 配置组合逻辑
  configs.push(
    ignores(options.ignores),
    javascript(),
    comments(),
    node(),
    // 其他配置模块
  )
  
  // 条件加载框架配置
  if (enableVue) configs.push(vue())
  if (enableReact) configs.push(react())
  
  return composer.append(...configs, ...userConfigs)
}

这种设计允许用户通过简单的选项开启/关闭特定功能，如：

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  typescript: true,
  vue: true,
  react: false,
  stylistic: {
    indent: 2,
    quotes: 'single'
  }
})

模块化配置组织

配置模块被组织在src/configs目录下，每个文件对应特定功能或框架的规则集：

配置文件	功能描述
javascript.ts	JavaScript基础规则
typescript.ts	TypeScript支持
react.ts	React/JSX规则
vue.ts	Vue单文件组件支持
stylistic.ts	代码风格规则
imports.ts	导入规范检查

以JavaScript配置为例，src/configs/javascript.ts定义了基础语法检查和最佳实践规则：

export async function javascript(options = {}): Promise<TypedFlatConfigItem[]> {
  return [
    {
      languageOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        globals: {
          ...globals.browser,
          ...globals.node
        }
      },
      rules: {
        'eqeqeq': ['error', 'smart'],
        'no-console': ['error', { allow: ['warn', 'error'] }],
        'prefer-const': 'error',
        // 更多规则...
      }
    }
  ]
}

从零开始构建ESLint共享配置

项目初始化

首先创建项目结构并初始化：

mkdir eslint-config && cd eslint-config
npm init -y
pnpm add -D eslint @types/eslint eslint-flat-config-utils

创建基础配置文件eslint.config.ts：

import type { Linter } from 'eslint'

export default [
  {
    name: 'my-config/base',
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module'
    },
    rules: {
      'no-console': 'warn',
      'eqeqeq': 'error'
    }
  }
] satisfies Linter.FlatConfig[]

实现配置工厂函数

参考src/factory.ts，实现支持选项的配置工厂：

// src/factory.ts
import type { OptionsConfig } from './types'
import { javascript } from './configs/javascript'
import { typescript } from './configs/typescript'

export function createConfig(options: OptionsConfig = {}) {
  const configs = [javascript()]
  
  if (options.typescript) {
    configs.push(typescript())
  }
  
  return configs
}

多框架支持实现

以TypeScript支持为例，创建src/configs/typescript.ts：

import type { TypedFlatConfigItem } from '../types'
import { GLOB_TS, GLOB_TSX } from '../globs'

export async function typescript(): Promise<TypedFlatConfigItem[]> {
  const pluginTs = await import('@typescript-eslint/eslint-plugin')
  
  return [
    {
      files: [GLOB_TS, GLOB_TSX],
      plugins: {
        ts: pluginTs
      },
      rules: {
        'ts/consistent-type-definitions': ['error', 'interface'],
        'ts/no-unused-vars': 'error'
        // TypeScript规则...
      }
    }
  ]
}

插件管理与自动重命名

为简化插件引用，@antfu/eslint-config在src/factory.ts中实现了插件自动重命名功能：

export const defaultPluginRenaming = {
  '@typescript-eslint': 'ts',
  '@stylistic': 'style',
  'import-lite': 'import'
}

// 使用方式
composer = composer.renamePlugins(defaultPluginRenaming)

这样可以将冗长的插件名简化，规则配置更加简洁：

// 简化前
rules: {
  '@typescript-eslint/no-unused-vars': 'error'
}

// 简化后
rules: {
  'ts/no-unused-vars': 'error'
}

测试与验证策略

确保配置有效性的关键是完善的测试体系。@antfu/eslint-config采用** fixtures测试法**，在test/fixtures.test.ts中实现：

function runWithConfig(name: string, configs: OptionsConfig) {
  it.concurrent(name, async ({ expect }) => {
    // 1. 复制测试文件到临时目录
    // 2. 应用ESLint配置并执行修复
    // 3. 对比修复结果与预期输出
    const files = await glob('**/*', { cwd: target })
    for (const file of files) {
      await expect.soft(content).toMatchFileSnapshot(join(output, file))
    }
  })
}

测试文件组织结构如下：

fixtures/
├── input/          # 原始测试文件
└── output/         # 预期输出结果
    ├── js/
    ├── ts/
    └── vue/

通过这种方式，可以直观验证配置对不同类型文件的处理效果，确保规则按预期工作。

发布与使用指南

发布到npm

在package.json中添加必要的字段：

{
  "name": "@your-scope/eslint-config",
  "main": "eslint.config.js",
  "files": ["dist", "eslint.config.js"],
  "peerDependencies": {
    "eslint": ">=8.0.0"
  }
}

项目中使用

安装配置并创建ESLint配置文件：

pnpm add -D @your-scope/eslint-config

// eslint.config.js
import yourConfig from '@your-scope/eslint-config'

export default yourConfig({
  typescript: true,
  vue: true
})

扩展与定制化

基于@antfu/eslint-config架构，可以轻松扩展自定义规则：

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu(
  { typescript: true },
  {
    name: 'my-overrides',
    rules: {
      'ts/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
    }
  }
)

也可以创建自己的配置模块，扩展基础功能：

// src/configs/custom.ts
export function custom(options = {}): TypedFlatConfigItem[] {
  return [
    {
      rules: {
        // 自定义规则
      }
    }
  ]
}

// src/factory.ts
configs.push(custom())

总结与展望

通过本文的学习，你已经掌握了构建专业ESLint共享配置的核心技术：

模块化架构：将配置拆分为独立模块，实现按需加载
配置工厂：通过选项动态组合配置，提升灵活性
插件管理：统一插件命名，简化规则配置
测试策略：使用fixtures确保配置有效性

随着ESLint Flat Config的普及，这种架构设计将成为主流。未来可以进一步探索自动化生成配置文档、集成更多格式化工具等方向，持续提升配置的易用性和功能性。

现在就动手创建你的第一个ESLint共享配置吧！如有疑问，欢迎查阅项目README.md或提交issue交流。

本文示例代码基于@antfu/eslint-config v2.6.4版本，实际实现时请参考最新源码。

【免费下载链接】eslint-config Anthony's ESLint config preset 项目地址: https://gitcode.com/GitHub_Trending/es/eslint-config

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考