VSCode无独立“代码块间距”配置,需协同设置editor.lineHeight(推荐22~26像素)、editor.padding(如{"left":24,"right":24})和workbench.tree.indent(推荐16~24像素),并关闭editor.fontLigatures以确保生效。

VSCode 本身不提供“代码块之间间距”这个独立配置项——所谓块间距,其实是行高、字间距、编辑器内边距、树状缩进等多重设置叠加后的视觉结果。
editor.lineHeight 控制行与行之间的基础高度
这是影响“块感”最直接的参数。设为整数(如 24)比小数更稳定,尤其在高 DPI 屏或使用 Nerd Fonts 时。值太小(18)会让函数体、if 分支、循环体挤成一片;太大(32)又导致逻辑单元被割裂。
- 推荐起始值:
22~26,搭配"editor.fontFamily": "'Fira Code', monospace"测试 - 改完不生效?先关掉
editor.fontLigatures,连字会干扰基线对齐 - 终端行高不跟着变——那是
terminal.integrated.lineHeight管的,需单独设
editor.padding 给代码内容区加左右呼吸感
VSCode 1.84+ 唯一官方支持的“左右留白”方式,只作用于主编辑区文字内容,不影响行号、断点、折叠图标等 UI 元素。
- 格式必须严格:
"editor.padding": {"left": 24, "right": 24} -
left: 24≈ 3 个英文字符宽度,适合多数阅读节奏;8几乎无感,64在小屏上易触发横向滚动 - 别和
editor.rulers混淆:后者只是参考线,光标仍可贴右边缘
workbench.tree.indent 和 explorer.compactFolders 调整侧边栏层级松紧度
文件资源管理器里“代码块感”弱,往往是因为目录树太紧凑。加大缩进 + 关闭紧凑模式,能快速提升结构辨识度。
-
"workbench.tree.indent": 20—— 默认是8,调到16~24区间效果最明显 -
"explorer.compactFolders": false—— 避免src/components/Button折叠成src/c…/Button这种压缩路径 - 这两个值对大纲视图(Outline)、搜索结果树也生效
editor.letterSpacing 微调字符密度,但别指望它解决块间距问题
它只拉宽单个字符间的水平空白,不是行距,也不是段落间距。对等宽字体敏感,对中文几乎无效。
- 设
0.3可让变量名、关键字稍“松”一点,但超过0.8容易破坏对齐(尤其带箭头、括号的语法) - 负值慎用:
-0.2可能还行,-0.5在Fira Code下已开始重叠 - 如果开了主题插件,它可能悄悄覆盖你的
editor.letterSpacing,得去 DevTools 的 Elements 面板里查 computed 样式确认
真正拉开“代码块”距离的,从来不是单一参数,而是 editor.lineHeight + editor.padding + workbench.tree.indent 这三者的协同。最容易被忽略的是:改完 editor.lineHeight 后没关 editor.fontLigatures,结果以为设置失效,其实只是渲染层打架了。











