首页 > 营销学院 > 技术知识

如何在 Prettier 中保留空花括号中的单个空格（如 { }）

如何在 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）辅助输入，而非对抗格式化器的核心约定。

# react # js # json # typescript # 编码 # if # for # 构造函数 # class # function # 对象 # this # bug # 自动化 # 不受 # 这不是 # 自定义 # 的花 # 而非 # 如需 # 但不 # 会将 # 因其 # 编辑器