2025年前端必备：@antfu/eslint-config让代码质量提升300%
【免费下载链接】eslint-configAnthony's ESLint config preset
项目地址: https://gitcode.com/GitHub_Trending/es/eslint-config
你还在为团队代码风格不统一而头疼吗？还在手动配置ESLint规则浪费时间吗？本文将带你一文掌握@antfu/eslint-config，这个让代码质量飙升的前端利器。读完本文，你将学会如何在5分钟内完成配置，让团队代码风格保持一致，减少80%的格式争议，显著提升开发效率。
为什么选择@antfu/eslint-config？
传统ESLint配置繁琐且难以维护，不同项目间规则不统一，导致团队协作效率低下。@antfu/eslint-config作为一款开箱即用的ESLint预设，整合了数十种最佳实践规则，支持TypeScript、Vue、React等多种场景，让你无需复杂配置即可拥有专业级代码检查能力。
核心优势
| 传统配置方式 | @antfu/eslint-config |
|---|---|
| 需要手动安装数十个插件 | 单一依赖，自动集成所有必要插件 |
| 需手动配置数百条规则 | 预设最佳实践，一行配置即可启用 |
| 不支持多语言统一检查 | 原生支持JS/TS/Vue/React/Markdown等15+种文件类型 |
| 格式与校验分离 | 集成ESLint Stylistic，无需额外Prettier |
5分钟快速上手
自动安装（推荐）
通过官方CLI工具一键完成配置，自动检测项目类型并安装依赖：
pnpm dlx @antfu/eslint-config@latest手动安装
- 安装核心依赖：
pnpm i -D eslint @antfu/eslint-config- 创建配置文件
eslint.config.mjs：
// eslint.config.mjs
import antfu from '@antfu/eslint-config'
export default antfu()- 添加脚本到
package.json：
{"scripts": {"lint": "eslint .","lint:fix": "eslint . --fix"}
}强大的多框架支持
@antfu/eslint-config内置对主流前端框架的深度支持，自动检测项目依赖并启用相应规则：
框架配置示例
// 全栈项目配置示例
export default antfu({// 启用Vue支持（含TypeScript和JSX）vue: { a11y: true },// 启用React/Next.js支持react: true,nextjs: true,// 启用TypeScript严格模式typescript: { tsconfigPath: 'tsconfig.json' },// 启用格式化工具支持（CSS/HTML等）formatters: true
})支持的框架模块
- Vue: src/configs/vue.ts - 包含Vue3单文件组件检查、模板规则、Accessibility支持
- React: src/configs/react.ts - 整合react-hooks、react-refresh等核心插件
- TypeScript: src/configs/typescript.ts - 类型安全检查与代码风格统一
- Next.js: src/configs/nextjs.ts - 针对Next.js特有的路由、图像等规则优化
高级自定义技巧
规则覆盖
在不破坏整体风格的前提下，自定义特定规则：
export default antfu({// 基础配置stylistic: {indent: 2, // 使用2空格缩进quotes: 'single' // 单引号}},// 针对TypeScript文件的特殊规则{files: ['**/*.ts'],rules: {'ts/consistent-type-definitions': ['error', 'interface']}}
)忽略文件
通过配置忽略不需要检查的文件：
export default antfu({ignores: ['dist/**','node_modules/**','*.config.{js,mjs}']}
)提升团队协作效率
IDE集成
VS Code自动修复配置
在 .vscode/settings.json 中添加：
{"editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit"},"eslint.validate": ["javascript", "typescript", "vue", "json", "markdown"]
}提交前自动检查
配合 lint-staged 实现提交前自动修复：
{"simple-git-hooks": {"pre-commit": "pnpm lint-staged"},"lint-staged": {"*": "eslint --fix"}
}规则可视化
使用官方工具查看当前启用的所有规则：
npx @eslint/config-inspector实际项目验证
项目的测试套件包含800+测试用例，确保在各种场景下的稳定性：
- 核心测试: test/cli.spec.ts - CLI工具功能验证
- 框架测试: test/fixtures.test.ts - 多语言文件检查测试
- 可访问性测试: test/jsx-a11y.test.ts - React组件可访问性规则验证
结语
@antfu/eslint-config不仅是一套代码检查规则，更是一套经过实战验证的前端工程最佳实践。从个人项目到企业级应用，它都能提供一致、高效的代码质量保障，让开发者专注于创造性工作而非格式争议。
立即尝试，体验代码质量的飞跃提升：
pnpm dlx @antfu/eslint-config@latest点赞收藏本文，关注作者获取更多前端工程化技巧！下一篇：《ESLint Flat Config完全指南》
【免费下载链接】eslint-configAnthony's ESLint config preset 项目地址: https://gitcode.com/GitHub_Trending/es/eslint-config
