如何配置ESLint规则实现嵌套JSX元素自动换行格式化

你要实现的是把单行嵌套的JSX拆成带缩进的多行结构，试过react/jsx-newline没用？其实得靠规则组合或者配合Prettier来搞定，下面是具体方案：

问题示例 #

需要转换的单行JSX：

<Link to={'operations'}><Button variant={'contained'}><i>Çalışmalar</i></Button></Link>

目标格式：

<Link to={'groups'}>
  <Button variant={'contained'}>
    <i>Gruplar</i>
  </Button>
</Link>

解决方案 #

纯ESLint方案：组合react插件规则 #

react/jsx-newline确实不处理这种嵌套组件的强制换行，得用下面几个规则配合：

• react/jsx-indent：控制JSX元素的缩进量
• react/jsx-wrap-multilines：强制嵌套JSX换行
• react/jsx-one-expression-per-line：确保每个嵌套组件单独占一行

在你的ESLint配置文件（比如.eslintrc.js）里加上这些规则：

module.exports = {
  // 保留你原有的配置（parser、extends等）
  rules: {
    // 缩进设为2个空格，可根据习惯调整
    "react/jsx-indent": ["error", 2],
    "react/jsx-wrap-multilines": ["error", {
      "declaration": "parens-new-line",
      "assignment": "parens-new-line",
      "return": "parens-new-line",
      "arrow": "parens-new-line",
      "condition": "parens-new-line",
      "logical": "parens-new-line",
      "prop": "parens-new-line"
    }],
    // 允许单个子元素的情况强制换行
    "react/jsx-one-expression-per-line": ["error", { "allow": "single-child" }]
  }
};

然后运行自动修复命令：

eslint --fix 你的文件路径.jsx

更省心的方案：ESLint + Prettier #

如果纯ESLint的规则组合效果不够理想，Prettier在JSX格式化上更专业，配合使用会更省心：

1. 先安装依赖：

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

2. 修改ESLint配置，集成Prettier：

module.exports = {
  extends: [
    // 保留你原有的extends，比如'eslint:recommended'、'plugin:react/recommended'
    "plugin:prettier/recommended"
  ],
  rules: {
    "prettier/prettier": ["error", {
      "jsxSingleQuote": true, // 和示例一致使用单引号
      "tabWidth": 2, // 缩进2个空格
      "printWidth": 80, // 超过该宽度自动换行，可按需调整
      "jsxBracketSameLine": false // 让JSX闭合标签单独换行
    }]
  }
};

运行eslint --fix后，Prettier会自动把单行嵌套JSX转成你要的多行缩进样式。

注意点 #

• 确保已经安装了eslint-plugin-react，否则上述react相关规则无法生效：

npm install --save-dev eslint-plugin-react

• react/jsx-newline主要用于控制JSX兄弟表达式之间的换行，不是用来拆分嵌套组件的，所以不符合你的需求。

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