
如何在 prettier 中保留空花括号中的单个空格(如 `{ }`)?prettier 默认会将空花括号 `{}` 格式化为紧凑形式,即使启用了 `bracketspacing: true`,该选项仅影响对象字面量和导入/导出括号的空格,**不控制函数体或类方法体中空代码块的空格**——此行为是硬编码的,不可通过配置关闭。
Prettier 的设计哲学强调一致性与最小化配置,因此对空代码块(如函数体、构造函数体、箭头函数体等)中的 {} 采用强制无空格格式(即 {}),无论 bracketSpacing 设置为何值。这一点常被误解:bracketSpacing: true 仅作用于以下场景:
- 对象字面量:{ key: value } ✅(启用时保留空格)
- 数组字面量:[1, 2, 3] ❌(不受 bracketSpacing 影响)
- 导入/导出语句:import { foo } from 'bar'; ✅
- 但不包括:function f() { }、class C { m() { } }、() => { } 等语句块中的花括号。
✅ 正确示例(bracketSpacing: true 生效):
// .prettierrc.json
{
"bracketSpacing": true,
"arrowParens": "always"
}// 对象字面量保持空格
const obj = { name: "Alice", age: 30 };
// 解构导入保持空格
import { useState, useEffect } from "react";❌ 无法实现(Prettier 强制覆盖):
class Entity {
constructor(readonly id: string) { } // 保存后自动变为 {}
}
const fn = () => { }; // 自动变为 () => {}⚠️ 注意事项:
- 这不是 bug,而是 Prettier 官方明确声明的行为;文档中特别注明:“This option does not affect the spacing between braces in block statements (e.g., if, for, function, class)”。
- 若团队强依赖 { } 风格(例如用于占位、后续扩展或与 ESLint 规则协同),可考虑:
- 使用 ESLint + @typescript-eslint/no-empty-function 或自定义规则辅助提示;
- 在空块中添加注释(Prettier 允许保留):{ /* noop */ };
- 不推荐禁用 Prettier 对某行的格式化(// prettier-ignore),因其破坏自动化一致性。
? 总结:Prettier 不提供控制空语句块花括号空格的开关。接受 {} 是其标准输出,也是社区广泛采纳的简洁风格。如需严格 { },应评估是否必须由 Prettier 实现——更合理的方案是统一团队认知,或通过编辑器片段(Snippet)辅助输入,而非对抗格式化器的核心约定。










