在@antfu/eslint-config中集成@tanstack/eslint-plugin-query的实践指南

背景介绍

在现代前端开发中，ESLint作为代码质量保障工具已经成为了项目标配。@antfu/eslint-config是antfu团队提供的一套开箱即用的ESLint配置方案，它集成了多种流行的代码规范和风格检查规则。而@tanstack/query(原react-query)作为React生态中优秀的数据获取库，其官方也提供了对应的ESLint插件@tanstack/eslint-plugin-query来帮助开发者更好地使用该库。

问题场景

许多开发者在从传统ESLint配置迁移到@antfu/eslint-config的扁平化配置(flat config)时，会遇到如何正确集成第三方插件的问题。特别是对于@tanstack/eslint-plugin-query这样的插件，其配置方式与传统ESLint有所不同。

解决方案

方法一：直接扩展插件配置

最直接的方式是在antfu配置后直接扩展插件的推荐配置：

import antfu from '@antfu/eslint-config'
import pluginQuery from '@tanstack/eslint-plugin-query'

export default antfu(
  {
    // antfu的基础配置
    formatters: true,
    react: true,
    stylistic: {
      indent: 2,
      semi: true,
      quotes: 'single',
    }
  },
  // 扩展query插件的推荐配置
  pluginQuery.configs['flat/recommended']
)

这种方式保持了配置的简洁性，同时确保了query插件的所有推荐规则都能生效。

方法二：合并多个配置对象

如果需要更细粒度的控制，可以采用配置对象合并的方式：

export default antfu(
  {
    // antfu基础配置
    ...
  },
  {
    // query插件配置
    ...pluginQuery.configs['flat/recommended'],
    // 其他自定义规则
    rules: {
      '@tanstack/query/exhaustive-deps': 'error',
      // 覆盖或添加其他规则
    }
  }
)

注意事项

1. 插件加载顺序：在扁平化配置中，配置对象的顺序很重要，后面的配置会覆盖前面的同名规则。

2. 规则优先级：如果antfu的默认配置中已经包含了某些与query插件冲突的规则，需要通过显式配置来调整优先级。

3. TypeScript支持：如果项目使用TypeScript，确保query插件的TypeScript相关规则也能正确加载。

4. React项目：对于React项目，建议同时配置react和query插件，以获得最佳开发体验。

最佳实践

对于大多数项目，推荐采用第一种简洁的配置方式。只有在需要特别定制某些规则时，才考虑第二种更详细的配置方法。无论采用哪种方式，都建议在配置完成后运行ESLint的--fix选项，并检查是否有预期外的规则冲突。

通过合理配置，开发者可以充分利用@antfu/eslint-config提供的便利性，同时又能享受到@tanstack/eslint-plugin-query带来的专业检查能力，从而提升代码质量和开发效率。