ESLint-plugin-react 中 jsx-no-literals 规则的增强方案探讨

背景介绍

在 React 开发中，eslint-plugin-react 是一个广泛使用的 ESLint 插件，它提供了许多针对 React 代码的静态检查规则。其中 jsx-no-literals 规则用于限制在 JSX 中直接使用字符串字面量，这一规则在国际化(i18n)场景下特别有用，可以强制开发者使用翻译函数而不是硬编码的文本。

现有问题

当前 jsx-no-literals 规则存在一个局限性：它无法区分不同类型的 JSX 元素。在实际开发中，有些特定的自定义组件（如 react-i18next 的 <Trans> 组件）本身就是设计用来处理文本内容的，它们会自动提取 JSX 中的文本进行翻译处理。然而，当前的规则会将这些有效用法也标记为错误。

解决方案设计

经过社区讨论，提出了一个增强方案：为 jsx-no-literals 规则添加一个 elementOverrides 配置选项。这个方案具有以下特点：

1. 精细控制：允许为特定组件单独配置规则行为
2. 类型安全：只允许大写字母开头的自定义组件名
3. 灵活配置：可以为每个组件单独设置规则选项

技术实现细节

elementOverrides 配置将采用对象形式，其中：

• 键(key)为自定义组件名称
• 值为该组件特有的规则配置对象

配置示例：

{
  "react/jsx-no-literals": [
    "error",
    {
      "elementOverrides": {
        "Trans": {
          "noStrings": false,
          "noAttributeStrings": true
        }
      }
    }
  ]
}

使用场景

1. 国际化组件：允许 <Trans> 组件包含文本内容，同时保持其他组件的限制
2. UI库组件：对特定UI组件放宽文本限制，如 <Button> 的文本内容
3. 文本处理组件：为专门处理文本的自定义组件提供例外

最佳实践建议

1. 谨慎使用：只对确实需要处理原始文本的组件放宽限制
2. 团队约定：明确哪些组件可以添加到 elementOverrides 中
3. 文档说明：为每个例外组件添加注释说明其特殊性
4. 代码审查：对新增的例外配置进行严格审查

未来展望

这一增强将使 jsx-no-literals 规则更加灵活实用，特别适合大型项目和国际化的场景。它保持了规则的严格性，同时为合理的例外情况提供了官方支持，避免了开发者不得不使用 eslint-disable 注释的情况。

通过这种精细化的控制，团队可以在保持代码质量的同时，适应各种复杂的实际开发需求。