VSCode能否调整代码折叠图标位置至缩进参考线旁？

Hey there! I totally get wanting those folding icons closer to your indent guides—it makes the code structure feel way more intuitive. Since VS Code doesn’t have a built-in setting for this, here are two solid solutions to get it done:

1. Use a Dedicated Extension #

The easiest route is to grab an extension built specifically for this task. Head to the VS Code Extensions panel (Ctrl+Shift+X) and search for Indentation Folding Icons. Once installed, it automatically shifts the folding markers to align with your indent guides—no extra configuration needed. It plays nicely with your existing Guides extension and bracket colorization too.

2. Custom CSS Tweak (For Full Control) #

If you prefer a DIY approach or the extension doesn’t fit your needs, you can modify VS Code’s styling directly using custom CSS:

• First, install the Custom CSS and JS Loader extension (it lets you inject custom styles into VS Code).
• Create a new CSS file somewhere on your computer (e.g., vscode-custom-styles.css) with this code:

  /* Adjust folding icon position to match indent guides */
  .monaco-editor .folders-indicator {
      left: calc(var(--editor-indent-size) * var(--indent-level) - 6px) !important;
      /* Tweak the "-6px" to fine-tune alignment to your liking */
  }
  
  /* Optional: Target specific indent levels if needed */
  .monaco-editor .folders-indicator.indent-1 {
      left: calc(var(--editor-indent-size) * 1 - 6px) !important;
  }
  .monaco-editor .folders-indicator.indent-2 {
      left: calc(var(--editor-indent-size) * 2 - 6px) !important;
  }
  

• Open VS Code settings (Ctrl+,), search for vscode_custom_css.imports, and add the full file path to your CSS file (e.g., "file:///C:/Users/YourName/Documents/vscode-custom-styles.css" on Windows, or "file:///Users/YourName/Documents/vscode-custom-styles.css" on Mac/Linux).
• Restart VS Code—you’ll get a prompt saying your installation is modified; click "Allow" to apply the changes.

This will move the folding icons right next to your indent guides, and you can adjust the pixel value in the CSS to get perfect alignment with your existing Guides extension lines.

内容的提问来源于stack exchange，提问作者Aslan French