深入解析antfu/eslint-config中JSX缩进规则冲突问题

在antfu/eslint-config项目中，开发者在使用JSX时可能会遇到一个常见的缩进规则冲突问题。这个问题主要涉及两个关键规则：@stylistic/indent和@stylistic/jsx-indent。

当项目同时启用这两个规则时，会出现一个有趣的冲突现象。具体表现为，无论开发者如何调整代码缩进，ESLint总会报告缩进错误。这种冲突在JSX属性缩进时尤为明显。

经过深入分析，我们发现问题的根源在于@stylistic/jsx-indent规则的checkAttributes选项。当该选项设置为true时，规则会对JSX属性的缩进进行严格检查，而这种检查方式与基础缩进规则@stylistic/indent产生了冲突。

解决方案相对简单：将checkAttributes选项设置为false可以避免这种冲突。这样配置后，JSX属性的缩进检查将被禁用，从而消除与基础缩进规则的冲突。

对于使用antfu/eslint-config的开发者来说，这是一个需要注意的配置细节。特别是在处理JSX代码时，合理的缩进规则配置对于保持代码整洁和一致性至关重要。

这个问题也提醒我们，在使用多个ESLint规则时，规则间的交互可能会产生意想不到的效果。作为最佳实践，建议开发者在配置规则时仔细考虑规则间的兼容性，特别是那些处理相似语法元素的规则。

虽然这个问题已经被确认并报告给上游项目，但在等待官方修复的同时，开发者可以通过调整配置来规避这个冲突，确保开发流程的顺畅。