在 vscode 中调整编辑器边距可通过设置参数和插件实现。1. 打开设置并搜索 editor: line numbers、editor: glyph margin 和 editor: reveal line number 来控制行号和断点区域显示；2. 使用 indent rainbow 或 better align 插件精细调整边距样式；3. 编辑 settings.json 文件启用 glyphmargin、linenumbers 和 folding 等选项以间接调整视觉边距，虽然不支持像素级设置，但能满足多数日常需求。
在 vscode 中调整编辑器边距宽度，其实是一个很简单但很多人不知道的小技巧。它不涉及复杂的配置，主要是通过修改设置中的几个参数来实现。如果你觉得代码贴着编辑器边缘太紧、影响阅读体验，或者想统一团队的代码展示风格，这个操作就很有用了。
如何在 VSCode 中调整编辑器边距？
VSCode 默认是自动隐藏边距的，但你可以手动设置左侧和右侧的空白边距，让代码看起来更整齐。具体做法如下：
- 打开设置（可以通过菜单 File > Preferences > Settings 或快捷键 Ctrl + ,）
- 搜索关键词 Editor: Line Numbers 和 Editor: Glyph Margin
- 你会发现一个叫 Editor: Reveal Line Number 的选项，虽然不是直接调边距，但结合下面的方法可以整体控制视觉边距
真正起作用的是：
- editor.glyphMargin: 控制是否显示断点旁边的空白区域
- editor.lineNumbers: 设置行号显示方式
- editor.folding: 是否显示折叠箭头图标
这些区域加起来，会影响你看到的“左边距”大小。
使用插件增强边距控制能力
如果你希望更精细地控制边距，比如单独设置左右留白宽度，原生设置可能不够用。这时候可以借助一些插件来实现：
- Indent Rainbow：不仅美化缩进线，还能帮助你判断当前代码块的实际边距位置
- Better Align：虽然主要功能是代码对齐，但配合使用能让你更清晰地看到边距变化带来的排版效果
安装插件后，通常可以在设置中找到新增的边距相关选项，甚至可以直接输入像素值来自定义左右边距。
修改 settings.json 文件自定义边距样式
如果你想更深入控制 VSCode 的边距显示，可以直接编辑工作区或用户设置的 settings.json 文件：
- 打开命令面板（Ctrl + Shift + P）
- 输入 Preferences: Open User Settings (JSON) 回车
- 添加以下内容：
{ "editor.glyphMargin": true, "editor.lineNumbers": "on", "editor.folding": true, "workbench.editor.untitled.hint": "status" }
虽然 VSCode 不支持直接设置像素级的左右边距，但通过控制这些 ui 元素的开启与关闭，你可以间接达到调整“视觉边距”的目的。
总的来说，VSCode 调整边距并不复杂，关键是搞清楚哪些设置会影响边距的显示。不需要下载太多插件，大多数时候只需要简单配置就能满足日常使用需求。
