如何阻止JSX中元素被括号包裹？WebStorm+Prettier+ESLint场景

1. 调整Prettier配置 #

Prettier的换行阈值是导致JSX被添加括号的核心原因，修改项目根目录的Prettier配置文件（如.prettierrc.js或.prettierrc）：

• 增大printWidth值，确保单行JSX不会超出宽度阈值，避免被自动换行加括号：

module.exports = {
  printWidth: 120, // 可根据代码长度调整为150等更大值
  // 其他已有配置...
}

• 可选：设置jsxBracketSameLine让JSX闭合标签保持在同一行，强化单行格式：

module.exports = {
  jsxBracketSameLine: true,
  // 其他已有配置...
}

2. 配置WebStorm IDE #

确保WebStorm完全遵循Prettier规则，禁用自带的格式化冲突逻辑：

• 打开Settings/Preferences → Languages & Frameworks → JavaScript → Prettier
  • 勾选"On code reformat"和"On save"，让IDE在格式化、保存时自动调用Prettier
  • 确认Prettier路径指向项目本地安装版本，避免全局版本不一致
• 关闭IDE自带的JSX自动换行：
  打开Settings/Preferences → Editor → Code Style → JavaScript → JSX
  • "Wrap elements"下拉菜单选择"Do not wrap"
  • 取消勾选"Wrap when typing reaches right margin"

3. 调整ESLint规则 #

检查ESLint是否存在强制加括号的规则，修改.eslintrc.js或对应配置文件：

• 针对react/jsx-wrap-multilines规则，允许单行return的JSX不加括号：

module.exports = {
  rules: {
    "react/jsx-wrap-multilines": [
      "error",
      {
        "return": "ignore", // 放行单行return的JSX无括号格式
        "declaration": "parens-new-line",
        "assignment": "parens-new-line"
      }
    ]
  }
}

完成以上设置后，格式化代码时，单行的return <Component />就不会被自动添加括号包裹了。

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