折叠图标不显示或显示为方块，是因字体不支持unicode符号；应选用fira code等支持block elements和geometric shapes的等宽字体，并关闭fontligatures；样式自定义需css注入，颜色调整可通过workbench.colorcustomizations配置editor.foldbackground。

折叠图标不显示或显示为方块？检查字体和渲染设置

VSCode 默认用 Unicode 字符（如 ▼、▶）做折叠图标，但某些字体不支持这些符号，就会显示为空白或方块。这不是插件问题，而是编辑器渲染层面的缺失。

• 确认当前字体支持「Unicode Block Elements」和「Geometric Shapes」区块 —— 推荐用 Fira Code、JetBrains Mono 或系统默认的 Consolas（Windows）、Menlo（macOS）
• 在设置里搜 editor.fontFamily，手动设为已安装的等宽字体，不要留空或用逗号拼接多个字体（容易 fallback 到不支持的字体）
• 如果用了字体连字（ligatures），关掉 editor.fontLigatures 再试一次 —— 某些连字规则会干扰折叠符号渲染

想换折叠箭头样式？只能靠 CSS 注入（无官方配置项）

VSCode 没有开放折叠图标 SVG 或 CSS 类的配置入口，workbench.colorCustomizations 也管不到这里。唯一可行路径是修改内置 CSS，但属于“非支持方式”，升级后可能失效。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 找到 VSCode 的 resources/app/out/vs/workbench/workbench.desktop.main.css（路径因版本而异，macOS 在 Contents/Resources/app/out/...）
• 搜索 .monaco-editor .margin-view-overlays .folded .codicon，定位到折叠图标相关规则
• 用 ::before 伪元素覆盖内容，例如：

  .monaco-editor .margin-view-overlays .folded .codicon::before { content: "▸" !important; }

• 改完必须重启 VSCode，且每次更新后需重新注入 —— 不建议在团队环境或 CI 机器上用

折叠区域高亮太浅或颜色错乱？优先调 colorCustomizations

折叠区域的背景色、边框、箭头颜色其实受主题控制，但部分主题（尤其自定义主题）没正确实现 editor.foldBackground，导致视觉脱节。

• 在 settings.json 中添加：

  "workbench.colorCustomizations": {
    "editor.foldBackground": "#25252680"
  }

• editor.foldBackground 是半透明色，值太透明（如 #00000010）会看不见，太实（#000000）又盖住代码；推荐用带 alpha 的十六进制（如 80 表示 50% 透明度）
• 如果用了暗色主题但折叠背景发灰，大概率是主题未定义该 token —— 此时手动配置比换主题更省事

折叠线位置偏移或图标错位？禁用“缩进指南”干扰

折叠图标默认对齐在行号右侧，但开启 editor.renderIndentGuides 后，缩进线和折叠图标共用同一列 margin 区域，可能造成视觉挤压或错位。

• 临时验证：关掉 editor.renderIndentGuides，看折叠图标是否回归正常位置
• 长期方案：保持缩进指南开启，但把 editor.guides.indentation 设为 false（只关缩进线，不关括号匹配等其他 guide）
• 注意：某些插件（如 indent-rainbow）也会注入 DOM 节点到 margin 区，若冲突明显，可尝试禁用后逐个排查

改折叠样式本质上是在绕过 VSCode 的 UI 封装层，CSS 注入最灵活但也最脆弱。真正稳定可控的只有颜色和字体这两项，其余都得接受官方限制 —— 比如你没法让箭头变成动画图标，也没法按语言区分折叠符号。