当前位置:首页 > 文章列表 > 文章 > 前端 > Prettier保留空括号空格配置方法

Prettier保留空括号空格配置方法

2026-01-11 11:48:43 0浏览 收藏

大家好,今天本人给大家带来文章《Prettier 保留空括号空格设置方法》,文中内容主要涉及到,如果你对文章方面的知识点感兴趣,那就请各位朋友继续看下去吧~希望能真正帮到你们,谢谢!

如何在 Prettier 中保留空花括号内的单个空格(如 { })

如何在 Prettier 中保留空花括号内的单个空格(如 `{ }`)?Prettier 默认会将空花括号 `{}` 格式化为紧凑形式,即使启用了 `bracketSpacing: true`,该选项仅影响对象字面量和导入/导出括号的空格,**不控制类方法、函数体等语句级空块的空格**——此行为不可配置,属于 Prettier 的硬编码规则。

Prettier 的设计哲学强调“约定优于配置”,因此对语法结构中的空块(如函数体、类方法体、if 语句块等)统一采用无空格格式 {}。这是有意为之的限制,而非配置遗漏。bracketSpacing: true 仅作用于以下场景:

  • 对象字面量:{ key: value } ✅(启用后保留空格)
  • 数组字面量:[1, 2] ❌(不受 bracketSpacing 影响)
  • 导入/导出大括号:import { foo } from 'bar'; ✅
  • 但不作用于语句块(Statement Block),例如:
    class Entity {
      constructor(readonly id: string) { } // ← 此处的 `{ }` 是 BlockStatement,Prettier 强制格式化为 `{}`
    }

⚠️ 重要提示:目前(Prettier v3.x)没有任何配置项可改变空代码块 { } → {} 的行为。官方文档明确说明 bracketSpacing 仅适用于“objects, arrays, and imports/exports”,不涵盖语句块。

替代方案建议

  1. 接受 Prettier 默认行为(推荐)
    这是社区主流实践,保持一致性与可维护性。空块写成 {} 更简洁,且语义无差异。

  2. 禁用 Prettier 对特定行的格式化(临时绕过)
    使用 // prettier-ignore 注释跳过该行:

    class Entity {
      constructor(readonly id: string) { } // prettier-ignore
    }

    ⚠️ 注意:这会完全跳过整行格式化,后续若添加内容需手动移除注释。

  3. 切换至可配置的格式化器(非推荐)
    如 ESLint + @typescript-eslint/eslint-plugin 的 space-in-brackets 规则(已废弃)或自定义插件,但将丧失 Prettier 的一致性保障,增加工具链复杂度。

✅ 总结:bracketSpacing: true 设置正确,但它本就不负责语句块空格;Prettier 不支持配置空函数体/空块内的空格,这是其核心约束。建议遵循默认风格,或仅在极少数必要场景下使用 // prettier-ignore 精确控制。

本篇关于《Prettier保留空括号空格配置方法》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!

HTML5适配传音手机方法详解HTML5适配传音手机方法详解
上一篇
HTML5适配传音手机方法详解
冰箱除异味技巧:经济环保又实用
下一篇
冰箱除异味技巧:经济环保又实用
2. 使用 JavaScript 的 dataset 属性读取数据const element = document.ge">
文章 · 前端   |  27分钟前  |  
示例元素
2. 使用 JavaScript 的 dataset 属性读取数据const element = document.ge">HTML中使用data-*属性存储业务数据并用dataset读取的方法如下:1. 在HTML元素中添加 data-* 属性
示例元素
2. 使用 JavaScript 的 dataset 属性读取数据const element = document.ge
101浏览 收藏
  • requestIdleCallback 结合 MessageChannel 实现任务切片调度,是一种优化网页性能、提升用户体验的高级技术手段。下面我将从原理、实现方式和实际应用三个方面详细解析这一技术。一、理解 requestIdleCallback 和 MessageChannel1. requestIdleCallbackrequestIdleCallback 是浏览器提供的一个 API,用于
    文章 · 前端   |  34分钟前  |  
    requestIdleCallback 结合 MessageChannel 实现任务切片调度,是一种优化网页性能、提升用户体验的高级技术手段。下面我将从原理、实现方式和实际应用三个方面详细解析这一技术。一、理解 requestIdleCallback 和 MessageChannel1. requestIdleCallbackrequestIdleCallback 是浏览器提供的一个 API,用于
    236浏览 收藏
  • float与inline-block结合布局技巧
    文章 · 前端   |  35分钟前  |  
    float与inline-block结合布局技巧
    458浏览 收藏
  • 栈实现字符串相邻抵消的思路如下:初始化一个空栈。遍历字符串中的每个字符:如果栈不为空,且栈顶元素与当前字符相同,则弹出栈顶元素(即抵消)。否则,将当前字符压入栈。最终栈中剩下的字符即为处理后的结果。示例输入:
    文章 · 前端   |  39分钟前  |  
    栈实现字符串相邻抵消的思路如下:初始化一个空栈。遍历字符串中的每个字符:如果栈不为空,且栈顶元素与当前字符相同,则弹出栈顶元素(即抵消)。否则,将当前字符压入栈。最终栈中剩下的字符即为处理后的结果。示例输入:"abba" 处理过程:a → 栈: [a]b → 栈: [a, b]b → 栈顶是 b,抵消 → 栈: [a]a → 栈顶是 a,抵消 → 栈: []结果:""(空字符串)代码示例(Pyth
    450浏览 收藏
  • 资料下载
    查看更多
    课程推荐
    查看更多
    AI推荐
    查看更多
    相关文章
    微信登录更方便
    • 密码登录
    • 注册账号
    登录即同意 用户协议隐私政策
    返回登录
    • 重置密码