ESLint Stylistic 配置预设详解：all、default 和自定义配置

【免费下载链接】eslint-stylisticMonorepo for ESLint Stylistic plugins and configs项目地址: https://gitcode.com/gh_mirrors/es/eslint-stylistic

ESLint Stylistic 是一个专注于代码风格的 ESLint 插件集合，提供了多种预设配置帮助开发者快速实现一致的代码格式化。本文将详细解析其核心配置预设（all、default）及自定义配置方法，助你轻松掌握代码风格管理技巧。

为什么需要配置预设？

代码风格统一是团队协作的基础，但手动配置每一条规则既繁琐又容易出错。ESLint Stylistic 的配置预设通过预定义规则集合，让开发者能够：

• ⚡ 快速上手，无需从零配置
• 🤝 确保团队代码风格一致性
• 🛠️ 灵活扩展，满足个性化需求

配置预设本质上是规则的集合，通过stylistic.configsAPI 提供，位于 packages/eslint-plugin/configs/ 目录下，包含customize.ts、disable-legacy.ts等核心文件。

核心配置预设解析

1. default 预设：开箱即用的推荐配置

default 预设（也称为 recommended）是 ESLint Stylistic 官方推荐的配置，基于一套经过精心调整的规则集合，确保代码风格的现代性和一致性。其默认参数为：

{ indent: 2, // 使用 2 空格缩进 quotes: 'single', // 单引号字符串 semi: false, // 不使用分号结尾 jsx: true // 支持 JSX 语法 }

适用场景：大多数现代 JavaScript/TypeScript 项目，特别是 React 应用。

使用方法（Flat Config 格式）：

// eslint.config.js import stylistic from '@stylistic/eslint-plugin' export default [ stylistic.configs.recommended, // ...你的其他配置 ]

2. all 预设：启用所有可用规则

all 预设会启用 ESLint Stylistic 所有支持的规则，使用各规则的原生默认值。官方特别提醒：

许多规则源自 ESLint 十年代码库，设计理念可能存在差异，默认选项未必最佳配合。

适用场景：需要全面控制代码风格的项目，或作为自定义配置的起点。

使用方法：

// eslint.config.js import stylistic from '@stylistic/eslint-plugin' export default [ stylistic.configs.all, // ...你的其他配置 ]

⚠️注意：all 预设不包含 JSX 规则和不可自动修复的规则，需手动添加。

自定义配置：打造专属代码风格

对于有特殊需求的项目，ESLint Stylistic 提供了customize工厂函数，通过高级选项快速生成个性化配置。

基础自定义示例

// eslint.config.js import stylistic from '@stylistic/eslint-plugin' export default [ stylistic.configs.customize({ indent: 4, // 4 空格缩进 quotes: 'double', // 双引号字符串 semi: true, // 使用分号结尾 jsx: false, // 禁用 JSX 支持 arrowParens: 'always' // 箭头函数参数强制括号 }), // ...你的其他配置 ]

配置效果对比

不同的代码风格配置会产生显著差异。以下是使用 dprint 和 Prettier 格式化同一代码的效果对比：

图：dprint 格式化工具使用特定配置生成的代码样式

图：Prettier 格式化工具使用默认配置生成的代码样式

ESLint Stylistic 的自定义配置能力可帮助你实现类似甚至更精细的代码风格控制。

进阶技巧：配置组合与扩展

1. 禁用遗留规则

如果项目中混合了旧版 ESLint 规则，可使用disable-legacy预设禁用所有已迁移的规则：

import stylistic from '@stylistic/eslint-plugin' export default [ stylistic.configs.recommended, stylistic.configs['disable-legacy'], // 禁用遗留规则 ]

详细迁移指南见 docs/guide/migration.md。

2. 规则覆盖

任何预设都可以通过后续配置覆盖特定规则：

export default [ stylistic.configs.recommended, { rules: { '@stylistic/indent': ['error', 4], // 覆盖缩进为 4 空格 '@stylistic/quotes': ['error', 'double'] // 覆盖引号为双引号 } } ]

总结：如何选择适合的配置

通过合理使用 ESLint Stylistic 的配置预设，你可以在保持代码风格一致性的同时，大幅减少配置工作。无论是快速上手还是深度定制，都能找到合适的方案。完整配置文档可参考 docs/guide/config-presets.md。

想要开始使用？只需将项目克隆到本地：

git clone https://gitcode.com/gh_mirrors/es/eslint-stylistic

然后根据本文指南选择并配置适合你的预设即可！

【免费下载链接】eslint-stylisticMonorepo for ESLint Stylistic plugins and configs项目地址: https://gitcode.com/gh_mirrors/es/eslint-stylistic