[Feature Request] Better alignment for file nesting

[lonix1]

File nesting now:

...And that is a good example. There are really bad ones in my codebase. The alignment is hard to understand - files in the same level are not vertically aligned.

Copy what was done in Visual Studio. All files are vertically aligned.

There are many examples on that page. Here's one:

This feature is very important, but right now the UX needs polish. Basically some indentation tweaks.

[gjsjohnmurray]

See also #148951 #148925

[JacksonKearl]

It looks like OtherFile.ts in your case it at the root of the workspace rather than in SomeFolder, is this correct? This is what I see when I try to replicate your setup:

I believe this is the correct behavior, it would be unexpected for a FileInRoot.ts to not be aligned with SomeFolder, and it would be unexpected for FileInFolder.ts to not be aligned with index.ts.

[lonix1]

Hi thanks for the reply. I took that screenshot from the vscode docs themselves. In my setup, like in the image, files at all levels are not aligned - the "group" is not at the same level as other files. The VS screenshots show proper alignment.

[JacksonKearl]

Yes, I made that screenshot and I wrote those docs :) the OtherFile.ts is at the top level of the workspace, and thus is aligned with SomeFolder. On the other hand index.ts is within SomeFolder and thus is indented. The VS screenshots you show do not include any folders, but if they did the children of the folders would be intended.

[lonix1]

Lol, well played Sir! And well done on the high quality docs, they are appreciated :smiley:

Perhaps my example was poor (and lazy, I just grabbed what was in the docs). Here are better ones:

Collapsed

Expanded

The files in the Demo directory - aaa.cs, bbb.js, bbb.min.js, bbb.min.js.map and ccc.txt - should all be aligned, in both the collapsed and expanded states.

But the way it works now is the nested "group" is indented.

Compare that to the way it's done in Visual Studio (or other IDEs), which place all same-level files in the same vertical line.

Note that I'm not trying to be pedantic. Without alignment it's hard to tell them apart, and that means the feature isn't useful (I've since disabled it). But the goal is worthy, and we've been waiting for this feature for years - like I said, it's appreciated, but just needs some little tweaks.

[JacksonKearl]

Ah, so you're in the case where there are no folder icons. In this case yes the nesting parent are indented past their siblings because the alternative is displaying their arrows with less indentation than the parent arrows, which IMO would be odd. With folder icons enabled all siblings (besides nested children) are on the same level:

[lonix1]

alternative is displaying their arrows with less indentation than the parent arrows, which IMO would be odd

It is odd when you think about it... but it works. IIRC in VS I think those arrows are hidden until hover. It makes more sense and is more "usable". Countless devs use VS with this feature.

Folder icons: I just went with the defaults I think, and I liked that it looks similar to VS.

Basically I was hoping it would look like other IDEs. Do you think it would be possible to provide the VS-like behaviour behind a config option? If not then go ahead and close this issue, and thanks for giving it consideration.

[ghost]

I think this is a useful thread. I really wanted to use file nesting, but I found it too confusing that siblings were not inline. I was using the Seti icon theme, which does not support folder icons.

For now, I've installed a different icon theme which does have folders, and it is working well, but I would prefer a solution that lines the siblings up with no folder icons.

[moalamri]

Basically any icons set that uses "hidesExplorerArrows": true would show the nesting in wrong alignment.

[moalamri]

You can override that in either user or workspace's settings.json

{
    "[icon-set-name].hidesExplorerArrows": false
}

[VSCodeTriageBot]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[VSCodeTriageBot]

This feature request has not yet received the 20 community upvotes it takes to make to our backlog. 10 days to go. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[VSCodeTriageBot]

:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[nfarina]

For anyone like me who landed here and was confused about the phrase "when folder icons are available" - it turns out VSCode supports different "icon themes" for the Explorer pane! The built-in theme "Minimal" does include icons for folders and "fixes" the nesting problem:

But you lose the wonderful custom icons that the default "Seti" theme provides. But but! You can add additional icon themes via extensions, including the expansive "Material Icon Theme" which includes folder icons and just about any other icon you could ever want:

Again, those on the thread probably knew about all this, but I didn't!

[ernestasjuska]

Hi, as @nfarina said, file icon themes Seti and AL (from Microsoft AL Language extension) do not do align properly.

We use this to "hide" report layouts we use and we mainly use AL theme.

Seti (bad)

AL (bad)

Minimal (good)

None (good)

[babakfp]

I changed the styling a bit:

I think this is better, but I still don't like it, but I guess this is the best that we are going to get😄

How to do the same?

Open this file C:\Users\babak\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

Change babak to your system name

Add this code to that CSS file:

/* Explorer tree (fileNesting) */
.monaco-tl-twistie.codicon {
    /* Use this to completely get rid of the arrows and the spacing */
    /* width: 0 !important;
    padding-right: 0 !important;
    visibility: hidden !important;
    background-image: none !important; */

    /* Use this to fix the alignment and the spacing */
    width: 0 !important;
    padding-right: 0 !important;
}

/* Use this to move the arrow and fix the spacing */
.monaco-tl-twistie.codicon::before {
    position: absolute !important;
    right: 4px !important;
    font-size: 10px !important;
}

Whenever you update your vscode version, you need to do the same process again...

this is the config file stuff:

    "workbench.tree.indent": 16,

[heartacker]

I turn off file nest now just for this UI 😢

[waynebloss]

I had the explorer.sortOrder set to foldersNestsFiles so that the UI was more readable, but today while working on a huge project that I didn't create, I ran into a problem with that - since the nested files are taken out of alphabetical order I had trouble finding the file I needed - turns out it was scrolled out of view up top with the rest of the nested files.

Once this nesting indentation problem is fixed then foldersNestsFiles should not be needed at all since it seems to me as if setting were added just as a workaround to this issue.

[waynebloss]

Installing the Material Icon Theme extension mentioned above fixes the problem.

Sorry for rapid-posting here, but I had previously failed to read all of the comments in-depth, saw others were still having the problem and I assumed that there was no easy fix outside of modifying VS Code's CSS. So I just wanted to make this the most recent comment for anyone else still looking. Thanks again @nfarina