ESLint Stylistic 插件在 Flat Config 中的正确配置方式

问题背景

在迁移到 ESLint 新配置系统 Flat Config 时，许多开发者会遇到插件配置格式的问题。特别是当同时使用 TypeScript ESLint 和 Stylistic 插件时，配置不当会导致 ESLint 抛出错误提示。

核心问题分析

Flat Config 系统对插件配置格式有严格要求，与传统的 ESLint 配置不同。在 Flat Config 中，plugins 必须是一个对象，其中键是插件名称，值是插件对象本身。而传统的数组格式在 Flat Config 中不再被支持。

错误配置示例

开发者常见的错误配置类似于：

import stylistic from '@stylistic/eslint-plugin'

export default [
  {
    plugins: ['@stylistic'] // 这是错误的 Flat Config 格式
  }
]

这种配置会导致 ESLint 抛出错误，提示 plugins 必须是一个对象而非数组。

正确配置方式

正确的 Flat Config 插件配置应该采用以下格式：

import stylistic from '@stylistic/eslint-plugin'

export default [
  {
    plugins: {
      '@stylistic': stylistic // 正确的对象格式
    }
  }
]

与其他插件配合使用

当同时使用 TypeScript ESLint 和 Stylistic 插件时，完整的配置示例如下：

import ts from '@typescript-eslint/eslint-plugin'
import stylistic from '@stylistic/eslint-plugin'

export default [
  {
    plugins: {
      '@typescript-eslint': ts,
      '@stylistic': stylistic
    },
    rules: {
      // 规则配置
    }
  }
]

常见误区

1. 禁用 Flat Config：有些开发者可能会错误地尝试禁用 Flat Config 特性来规避格式问题，这实际上不是解决方案。

2. 混合格式：试图在 Flat Config 中混用传统配置格式会导致不可预期的行为。

3. 插件导入方式：确保正确导入插件对象，而不是仅仅引用插件名称字符串。

最佳实践建议

1. 始终使用对象格式配置插件
2. 明确导入插件对象而非字符串
3. 保持配置文件的模块化结构
4. 利用现代 JavaScript 的导入导出语法

通过遵循这些原则，开发者可以顺利地在 Flat Config 系统中整合 ESLint、TypeScript ESLint 和 Stylistic 插件，构建强大的代码风格检查工具链。