如何配置ESLint在同级JSX块之间添加空行？

可以通过ESLint核心规则或React插件配置实现需求，以下是具体方案：

1. 用ESLint核心规则 lines-between-statements #

该规则可控制不同类型语句间的空行，我们可以指定同级JSX元素之间必须添加空行。在ESLint配置文件（如.eslintrc.js）中添加：

module.exports = {
  rules: {
    'lines-between-statements': [
      'error',
      {
        blankLine: 'always',
        prev: 'jsx-element',
        next: 'jsx-element'
      }
    ]
  }
};

配置完成后，ESLint会检测同级JSX元素间的空行，缺失时触发报错，执行eslint --fix即可自动补全空行。

2. 结合eslint-plugin-react优化配置 #

如果项目已使用eslint-plugin-react，可配合react/jsx-newline规则确保JSX元素换行，再结合上述核心规则实现空行效果：

module.exports = {
  plugins: ['react'],
  rules: {
    'react/jsx-newline': ['error', { prevent: false }],
    'lines-between-statements': [
      'error',
      {
        blankLine: 'always',
        prev: 'jsx-element',
        next: 'jsx-element'
      }
    ]
  }
};

注意事项 #

• 若项目同时使用Prettier，需通过eslint-config-prettier禁用Prettier会覆盖的ESLint规则，避免配置冲突。
• 上述配置对嵌套在JSX内部的同级子元素同样生效，比如你示例中<div>下的三个<Hello />组件会被自动添加空行。

内容的提问来源于stack exchange，提问作者yqbk