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

在antfu/eslint-config项目中，开发者遇到了一个关于Svelte文件中缩进规则冲突的技术问题。这个问题涉及到两个不同的ESLint规则之间的交互，值得深入探讨。

问题背景

在Svelte组件开发中，当使用嵌套的三元运算符时，会出现两种不同的缩进风格要求：

1. style/indent规则要求嵌套结构需要进一步缩进
2. svelte/indent规则则要求保持平坦的缩进风格

这种冲突会导致代码格式化不一致，影响开发体验和代码可读性。

技术分析

规则冲突的本质

这种冲突源于两个不同的缩进规则试图控制同一段代码的格式：

• style/indent是通用的JavaScript缩进规则
• svelte/indent是专门为Svelte设计的缩进规则

在Svelte文件中，这两种规则可能会对同一段JavaScript代码产生不同的缩进要求。

嵌套三元运算符的缩进

问题中展示的嵌套三元运算符是一个典型的冲突场景：

const test
    = someVal === true
      ? 'some different value'
      : someVal === false
      ? undefined
      : someVal;

这种结构在JavaScript中很常见，但不同的缩进规则会对其有不同的格式化要求。

解决方案

根据Svelte官方ESLint插件的建议，在Svelte文件中应该：

1. 禁用通用的style/indent规则
2. 启用专门的svelte/indent规则

这种配置方式可以确保Svelte文件中的代码（包括JavaScript部分）都遵循一致的缩进风格。

最佳实践建议

1. 对于Svelte项目，应该优先使用svelte/indent规则
2. 在配置文件中明确关闭style/indent规则以避免冲突
3. 考虑使用Prettier等工具统一代码风格，减少规则冲突
4. 对于复杂的逻辑判断，考虑重构为if-else语句或单独的函数，提高可读性

总结

在antfu/eslint-config项目中处理Svelte文件时，缩进规则的冲突是一个需要注意的问题。通过理解不同规则的优先级和适用场景，可以配置出更合理的代码风格检查方案。对于Svelte项目，遵循其专用规则通常能获得更好的开发体验和代码一致性。