User configurable indent in file explorer

[realuser]

I want to configure the indent of files inside folders within the sidebar file explorer.

I am using the Seti (Visual Studio Code) file icon theme

Currently, the indent is too small so it's hard for me to see whether files are part of a folder or not. I would like to be able to set this indent to a user configurable amount.

For example, in the below screen shot it's difficult for me to quickly see that:

1. The properties folder is open
2. AssemblyInfo.cs is inside the properties folder

• VSCode Version: 1.16.1
• OS Version: Windows 10

[isidorn]

@bpasero is there already a feature request for this (could not find it with a quick search)?

[bpasero]

I think not, maybe @aeschli knows because this seems to be related to using icons.

[stunaz]

Having the same issue here.Thought it was 2 spaces by default somewhere, couldnt find the setting.

[timuckun]

I too would like a way to set a deeper indent.

[relloyd]

+1 from me for this please. I find it's the indentation of subdirectories that isn't deep enough to be useful at a glance. Files are indented well. So because of the inconsistency it's hard to visually trace a vertical line down to find next/sibling folders. Perhaps I just need a new theme. Hmm.

[bernatfortet]

Is it possible to modify this through themes?

[ansiblejunky]

That would be the best solution I think, but I'm afraid at the moment I don't see it possible.

[rkyoku]

+1

👍 @aeschli this would be a great configuration option for usability. The current indent (2 spaces?) is way too small for a good visibility, especially when we use large screens and there is plenty empty space left.

[XPD-Kasun]

Yeah please, one of the most heavily used area is this explorer panel. Current setting for indentation level of this panel is so small. Its one of the reasons that I felt desperate about vscode. If this can be configured that would be awesome. Yay!

[imguilherme]

+1

[spekulant]

+1
It's really hard to navigate around big projects with indentation like this.

[jasonalls]

I would also like to see this feature implemented. Struggling with the small indentation.

[Japes]

+1

[bwilloughby-cp]

+1

[yanari]

+1

[euphwes]

+1

As others have said, this would really help with quick visual distinction of folder/file hierarchy.

[nowinskp]

+1

[codeliger]

Any progress on this?

[ansiblejunky]

A lot of supporters, but I am not aware of any progress.

[shauntck]

Agree this would be very helpful!

[LucasBaizer]

+1 to this. Would be extremely useful, I can barely figure out what's happening with current (forced) indentation.

[kemalk89]

+1

[basilbeltran]

how many people have to ask for this simple fix? This looks like it would be easy to fix no?
BTW: I think this is a BUG. Not a feature request. If it renders the product somewhat unusable that is a problem, not a missing feature.

[basilbeltran]

There is a workaround
#17777
more directly: https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6
However this looks like quite a PITA.

[ghost]

+1

[shreeve]

The hierarchical lines are impossible to get right. I gave up and just focused on improving the indentation.

The result looks a lot better and is far simpler than trying to fix the lines. The file to edit is (on macos) is:

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css:

:root { --tree-width: 20px; }
.explorer-folders-view .monaco-tree-row { overflow: visible !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "1"] { padding-left: calc( 0 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "2"] { padding-left: calc( 1 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "3"] { padding-left: calc( 2 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "4"] { padding-left: calc( 3 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "5"] { padding-left: calc( 4 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "6"] { padding-left: calc( 5 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "7"] { padding-left: calc( 6 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "8"] { padding-left: calc( 7 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "9"] { padding-left: calc( 8 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="10"] { padding-left: calc( 9 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="11"] { padding-left: calc(10 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="12"] { padding-left: calc(11 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="13"] { padding-left: calc(12 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="14"] { padding-left: calc(13 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="15"] { padding-left: calc(14 * var(--tree-width)) !important; }

The final result looks like:

[ansiblejunky]

@shreeve Thanks for the workaround. Do we add that code directly to the end of the workbench.main.css file? I opened the file and not really comfortable adding that to the end - doesn't seem to be right. Perhaps you need to provide more info on the edit to the file? Thanks.

[mfresonke]

@ansiblejunky Yes, just add that code to the end of the file and restart vscode. Should be that simple!
@shreeve Thanks so much for providing the workaround! Worked perfectly!

[shreeve]

[MarkDalsaso]

This doesn't seem to work so well under Windows. VS Code reports corrupt installation.

[shreeve]

@MarkDalsaso - From what I understand, the "corrupt installation" message is due to VS Code seeing that the workbench.main.css file has changed, and assuming that it must be corrupt as a result.

There really is just a variable deep in the code that hard codes this value to 12px. In the above tweak, we are just forcing an override to the css to set the value to 22px (or whatever you set --tree-width to in line 10 in the image above). Another way to do it would be to make this an official setting within VS Code, which could be changed by the user.

I can create a pull request to have this officially pulled into the main repo.

[shreeve]

See #66579 - Improve file explorer indentation levels

[shreeve]

Check out #66580 - New Explorer: indentation at root has changed
And #66485 - New Explorer

[MarkDalsaso]

Thanks Steve, and great job! The indentation in the Explorer is an important visual cue, and one that everyone has their own preference for. It shouldn't be a pain in the patootie to adjust!

[shreeve]

Wahoo... it looks like this is finally getting resolved officially!

Check out: #66605 - Introduce tree.indentPixels configuration

Thanks @isidorn, @joaomoreno, and @bpasero!

[isidorn]

You can try this out in tomorrow's vscode insiders and let us know what you think.
Thanks to @joaomoreno we now have this.

[shreeve]

[MarkDalsaso]

Nice! Looks exactly like what was needed! Great job ALL!

[technolingo]

How can I get visible file tree lines?

[realuser]

@technolingo there's a separate issue for this. See Directory tree indent guides in File Explorer #17777. React to the first post with a thumbs up to show your support of that