如何使用ESLint控制多子元素场景下的换行（无需Prettier）

要实现你要的效果，只需借助eslint-plugin-react插件的几个规则来配置，完全不需要Prettier。具体步骤如下：

1. 安装必要插件 #

首先确保安装eslint-plugin-react，它提供了所有JSX相关的ESLint规则：

npm install eslint-plugin-react --save-dev
# 或者用yarn
yarn add eslint-plugin-react --dev

2. 配置ESLint规则 #

在你的ESLint配置文件（比如.eslintrc.js）中添加以下配置：

module.exports = {
  plugins: ["react"],
  // 可选：启用react推荐规则集，减少手动配置量
  extends: ["eslint:recommended", "plugin:react/recommended"],
  rules: {
    // 强制多子元素的JSX每个子元素单独一行
    "react/jsx-newline": ["error", { "multilines": "always" }],
    // 让父元素闭合标签单独一行并与开始标签对齐
    "react/jsx-closing-bracket-location": ["error", "tag-aligned"],
    // 子元素相对于父元素缩进2个空格（可根据需求调整数值）
    "react/jsx-indent": ["error", 2],
    // 避免基础缩进规则与JSX缩进规则冲突
    "indent": ["error", 2, {
      "ignoredNodes": ["JSXElement *"]
    }]
  },
  // 可选：自动检测React版本，提升规则兼容性
  settings: {
    react: {
      version: "detect"
    }
  }
};

3. 自动修复代码 #

配置完成后，运行ESLint的自动修复命令，就能把挤在一行的多子元素JSX转换成你想要的格式：

eslint --fix path/to/your/jsx-files

规则说明 #

• react/jsx-newline: 当JSX包含多个子元素时，强制每个子元素单独换行，杜绝所有子元素挤在同一行的情况。
• react/jsx-closing-bracket-location: 让父元素的闭合标签单独占一行，并且和开始标签对齐，保证代码结构清晰。
• react/jsx-indent: 控制JSX子元素的缩进量，这里设置为2空格，可根据团队规范调整。
• indent: 忽略JSX元素内部的缩进检查，交给专门的react/jsx-indent处理，避免规则冲突。

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