0

0

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

霞舞

霞舞

发布时间:2025-12-30 17:27:08

|

588人浏览过

|

来源于php中文网

原创

如何在 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 强制覆盖):

Rationale
Rationale

Rationale 是一款可帮助企业主、经理和个人做出艰难的决定的AI工具

下载
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)辅助输入,而非对抗格式化器的核心约定。

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

710

2023.08.22

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

455

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

6

2025.12.06

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

469

2023.08.04

js函数function用法
js函数function用法

js函数function用法有:1、声明函数;2、调用函数;3、函数参数;4、函数返回值;5、匿名函数;6、函数作为参数;7、函数作用域;8、递归函数。本专题提供js函数function用法的相关文章内容,大家可以免费阅读。

158

2023.10.07

PHP 命令行脚本与自动化任务开发
PHP 命令行脚本与自动化任务开发

本专题系统讲解 PHP 在命令行环境(CLI)下的开发与应用,内容涵盖 PHP CLI 基础、参数解析、文件与目录操作、日志输出、异常处理,以及与 Linux 定时任务(Cron)的结合使用。通过实战示例,帮助开发者掌握使用 PHP 构建 自动化脚本、批处理工具与后台任务程序 的能力。

21

2025.12.13

excel制作动态图表教程
excel制作动态图表教程

本专题整合了excel制作动态图表相关教程,阅读专题下面的文章了解更多详细教程。

24

2025.12.29

freeok看剧入口合集
freeok看剧入口合集

本专题整合了freeok看剧入口网址,阅读下面的文章了解更多网址。

74

2025.12.29

俄罗斯搜索引擎Yandex最新官方入口网址
俄罗斯搜索引擎Yandex最新官方入口网址

Yandex官方入口网址是https://yandex.com;用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

207

2025.12.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号