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.

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.

35 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. Thanks a lot! I thought it was just me and my aging eyes, much easier to see where you are in the tree with a deeper indent.

  3. 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.

  4. 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!

  5. 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 …

  6. Per Lundberg

    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.

  7. Andreas Pardeike

    Holy cow, I previously had to doctor in my layout via a bunch of extensions. Not anymore and not a second too late.

  8. This annoyed me for so long! it was pretty much the only thing about VS Code that I hate. I set my treeindent right to 30. Thanks a lot!

  9. Nice one. This was really annoying me too since swapping over from Sublime. Thanks so much.

  10. The settings are actually reached by pressing [CTL] + [,] and not CTL+
    great tip though and was just what I am looking for.

Comments are closed.

Scroll to Top