如何配置react/jsx-no-useless-fragment规则放行<> {children}</>场景

你可以通过配置该ESLint规则的**allowExpressions选项**来实现需求，这个选项允许Fragment仅包裹单个表达式（比如{children}）的场景不被标记为无用。

具体配置方式如下：

• 在你的ESLint配置文件（如.eslintrc.js、.eslintrc.json）中，修改rules字段里的该规则配置：

{
  "rules": {
    "react/jsx-no-useless-fragment": ["error", {
      "allowExpressions": true
    }]
  }
}

配置生效后：

• 像<><Element /></>这类真正无用的Fragment依然会被规则正常检测并提示，满足你清理代码库的需求；
• return <> {children}</>这种仅包裹单个表达式的场景会被规则忽略，不会触发警告，无需再逐个添加// eslint-disable-next-line react/jsx-no-useless-fragment注释。

内容的提问来源于stack exchange，提问作者Barry Michael Doyle