Visual Studio Code finally has a tree indent setting

I’ve been using Visual Studio Code more and more over the past year, and I really like the experience. It’s fast, lightweight and easy to use. Although one thing, in particular, infuriated me!

The folder indent in the file list makes it nearly impossible for me to see the folder structure at a glance when folders are expanded.

Thankfully, in a recent update, Microsoft have included a setting called Workbench > Tree: Indent that allows you to change this value. It defaults to 8, but allows your to increase it up to 20.

To get to the setting, simply type Ctrl + , in the editor window then type treein as you see below and you’ll find the setting. If you don’t see the setting, ensure your Visual Studio Code is up to date.

Workbench Tree Indent
Workbench > Tree: Indent

As you can see in the before and after image below, the indent is now far more visible and you can see at a glance where the folders and files are with respect to each other.

Tree Indent before and after

SHARE

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

COMMENT

21 thoughts on “Visual Studio Code finally has a tree indent setting”

  1. Thanks for taking the time to post this! I’ve also been annoyed by the minuscule default tree indent in VS Code. Now, I can recognize my project hierarchy much better, at-a-glance.

  2. Hey, thanks for the post. I just setup vscode, looked at the tree and thought, “I wonder if I can increase the indent for that.” First result on Google sent me here for the exact tip I was looking for!

    I thought 24-28 looked perfect for me but I noticed you said it can be up to “20”. Looks like they bumped the max indent to 40, which looks ridiculous, but I’m sure some would think my preference does, too 🙂

    1. I setup a new PC the other day and also noticed it could go above 20. I think I’m set at 25 now which is how I like it. I’ve noticed Windows Explorer in Windows 10 has a narrower indent now too which is annoying. I’ll have to look for a setting for that too.

  3. I hope you find it for Explorer! I’ve looked around a little bit for that option, but the closest solution I’ve seen suggested is to use an Explorer replacement that does provide variable indent level. Not quite the solution I was looking for lol.

    Seems like there would be something for it hidden deeply in the registry or in the group policy settings somewhere, but so far no dice.

    Thanks again and good luck!

  4. Thank you for the post , Due to tree font size i was not using the Code for long time .. Now i’m back with Code …

  5. Thanks, appreciated. Like others, I also find the default annoyingly low.

    The Workbench -> Tree: Render Indent Guides setting is also useful to make it more clear what files belong to what folder in the tree.

Leave a Comment

Your email address will not be published. Required fields are marked *

RELATED