cdROma.me

ENG / RUS

Customize Indentation Guides in VS Code

12 November, 2024

VS Code file tree with green indent guides for the nested src and components folders

Setting up indentation guides in Visual Studio Code helps you see folder structure clearly, making it easier to find what you need without straining your eyes.

Steps to Configure Indentation Guides

  1. Open Settings JSON

Press Cmd + Shift + P (or Ctrl + Shift + P on Windows/Linux) to open the command palette, then type and select Preferences: Open Settings (JSON).

  1. Add Color Customization

In the settings.json file, add the following code to customize the color of the indentation guides:

"workbench.tree.renderIndentGuides": "always",
"workbench.colorCustomizations": {
   "tree.indentGuidesStroke": "#05ef3c"
},
  1. Adjust Indentation Width (Optional)

To change the width of indentation levels, add this line:

"workbench.tree.indent": 15, // Adjust as needed
  1. Save and Restart

Save settings.json, then restart VS Code to see your new indentation guides.

Thank You

Enjoy coding with a cleaner view!