ESLint 中 indent 规则的三元表达式缩进问题解析

在 JavaScript/TypeScript 代码格式化过程中，缩进规则的处理一直是开发者关注的焦点。本文将以一个典型的缩进问题为例，深入分析 ESLint 中 indent 规则在处理三元表达式时的行为特点。

问题现象

当代码中存在包含函数的三元表达式时，ESLint 的 indent 规则会出现不符合预期的缩进检查。具体表现为：

1. 对象属性中的三元表达式缩进会被错误标记
2. 函数返回的三元表达式中，箭头函数体的缩进会被误判
3. 自动修复后的结果反而破坏了原有的代码结构

技术背景

ESLint 的 indent 规则提供了 offsetTernaryExpressions 选项，用于控制三元运算符的缩进方式。当设置为 true 时，三元运算符的条件部分会额外增加一级缩进，以提高代码可读性。

问题本质

通过分析可以发现问题主要出现在以下两种场景：

1. 对象属性中的三元表达式：当三元表达式作为对象属性值时，ESLint 无法正确处理属性名与三元表达式之间的缩进关系。

2. 函数体中的三元表达式：当三元表达式返回函数时，ESLint 对函数体内部的缩进计算存在逻辑缺陷，导致误报缩进错误。

解决方案建议

虽然这是一个已知问题，但值得注意的是，ESLint 官方已经将 indent 规则标记为废弃状态。对于需要精细控制代码格式的项目，建议：

1. 迁移到专门的代码格式化工具
2. 使用社区维护的替代方案
3. 对于暂时无法迁移的项目，可以针对特定文件或代码块禁用相关规则

最佳实践

在实际开发中，处理复杂的三元表达式时，建议：

1. 避免在对象属性中直接使用复杂的三元表达式
2. 对于返回函数的复杂三元表达式，考虑重构为 if-else 语句
3. 保持三元表达式各部分的简洁性
4. 团队统一约定三元表达式的使用规范

通过理解这些底层原理和最佳实践，开发者可以更好地处理代码格式化中的各种边界情况，提高代码的可维护性和一致性。