Directory tree indent guides in File Explorer #17777

Avol-V · 2016-12-23T14:38:34Z

It's hard to navigate through project with complex directory structure.

Much better to look at something like this:

├─ app
|  └─ main.js
├─ src
|  ├─ main.ts
|  └─ tsconfig.json
└─ package.json

Instead of this:

  app
    main.js
  src
    main.ts
    tsconfig.json
  package.json

The text was updated successfully, but these errors were encountered:

cosmoKenney · 2017-01-24T03:38:58Z

I agree with this. I especially find that the indenting is hard to interpret. And is even worse when file icons are enabled in explorer.

misantronic · 2017-02-05T13:59:36Z

I also agree! +1

ScallyGames · 2017-03-23T10:12:19Z

Another thing that would be nice in that regard is customizing the indent distance of the next level of hierarchy.
While I would also love some guidelines, I think having i.e. twice the distance and thus having clearer separation would already help a lot.

cosmoKenney · 2017-04-01T16:22:19Z

@Aides359 I agree. Everyone's eyes are different. Just look at tabs. Some people like 2 space tabs in their code. Some like 8. Other 4.

I'm a little dyslexic, so I really have a hard time with the indention in VS Code,

Though it does seem to have gotten a little better. But it's still bad on my laptop screen, for instance, whereas on my large monitors at work, it's more noticeably indented.

chentel · 2017-04-23T00:29:05Z

Yes! Please tree lines as an option. It'd be especially helpful when editor is open at a far corner on a large monitor.

Tying the toggle to mouse-over in Explorer Pane would help in keeping the clean look.

edmundo096 · 2017-06-22T15:20:27Z

Really useful on big projects.
Any update on this? Or where I could start looking in the source?

cosmoKenney · 2017-06-22T17:08:39Z

@edmundo096 this was closed as a dup of #21295, which is also closed. So I guess this is going nowhere.

roblourens · 2017-06-22T17:42:01Z

@cosmoKenney This issue isn't closed...

edmundo096 · 2017-06-22T19:27:20Z

@cosmoKenney, nope, this is the original post and it isn't resolved. #21295 was the duplicate.
I couldn't find a configuration to enable this indentation guides on the Sidebar Explorer yet.

pie6k · 2017-06-24T06:52:58Z

So yup... my eyes are bleeding. I'm like what is index.js of Expression folder... I know you're there!.

I think it should have quite high priority. Modern web apps quite often have deep nested files structure. see this example

chentel · 2017-07-07T19:34:16Z

and here's the approximate look without Magnifier. not so bad... if you've got the vision of a fighter pilot

goudcode · 2017-07-11T18:31:37Z

I would like this as well, it's quite easy to get lost in larger projects.

jens1o · 2017-07-11T18:50:02Z

I also agree this should be considered, even when you start a tiny project and know every file by heart, it's kind of annoying to find them when you want to use the explorer, and not the "Quick File Opener"...

Winston-Guess · 2017-07-13T06:29:43Z

I agree! I've been trying to look for a setting or extension that does this over the last two days but nothing T_T. I really struggle to navigate using the explorer (very helpful when you're navigating a new project).

Indent lines would be amazing!

purefan · 2017-08-11T12:32:51Z

Do we have any indication if this is in the roadmap?

exectails · 2017-08-19T21:13:08Z

+1

bclarkbasly · 2017-08-21T20:35:57Z

+1 this is an enormous pain for me on my large monitor.

Livshitz · 2017-09-11T15:38:59Z

++1

kylehorn · 2017-09-12T14:07:45Z

+1, one reason I might go back to Atom

phamduong · 2017-09-18T11:19:15Z

+1

petyrek · 2017-09-18T12:41:58Z

+1 Microsoft please!

jakewtaylor · 2017-09-21T14:45:01Z

+1 for this.

In the meantime, I've found a bit of a hack to solve it for now:

Find your VSCode install (mine was C:/Program Files/Microsoft VS Code) and go to resources/app/out/vs/workbench and open workbench.main.css.

Add these lines to the end of the file:

.monaco-tree-row[aria-level="1"]  { padding-left:   0px !important; }
.monaco-tree-row[aria-level="2"]  { padding-left:  20px !important; }
.monaco-tree-row[aria-level="3"]  { padding-left:  40px !important; }
.monaco-tree-row[aria-level="4"]  { padding-left:  60px !important; }
.monaco-tree-row[aria-level="5"]  { padding-left:  80px !important; }
.monaco-tree-row[aria-level="6"]  { padding-left: 100px !important; }
.monaco-tree-row[aria-level="7"]  { padding-left: 120px !important; }
.monaco-tree-row[aria-level="8"]  { padding-left: 140px !important; }
.monaco-tree-row[aria-level="9"]  { padding-left: 160px !important; }
.monaco-tree-row[aria-level="10"] { padding-left: 180px !important; }
.monaco-tree-row[aria-level="11"] { padding-left: 200px !important; }
.monaco-tree-row[aria-level="12"] { padding-left: 220px !important; }
.monaco-tree-row[aria-level="13"] { padding-left: 240px !important; }
.monaco-tree-row[aria-level="14"] { padding-left: 260px !important; }
.monaco-tree-row[aria-level="15"] { padding-left: 280px !important; }

Done!

That code indents each level a further 20px, starting from 0px (the !important overrides the default values), but of course you can change that from 20px to as much as you want, just change the values. I've also only gone 15 levels deep, which you can expand too, but if your project is deeper than 15 levels, I'd suggest you re-evaluate your directory structure. ;)

tribal2 · 2017-09-21T19:20:51Z

@jakewtaylor this worked great for me, the only issue is that you will receive a 'corrupted installation' notification after doing the changes (..more info here).

pie6k · 2017-09-21T19:44:43Z

@jakewtaylor @swordf1zh could you provide some screenshot with this 'hack'?

Inspired with your idea, I've created styles like:

.monaco-tree .monaco-tree-rows>.monaco-tree-row {
    position: relative;
}

.monaco-tree .monaco-tree-rows>.monaco-tree-row:before {
    content: '';
    top: 0px;
    bottom: 0px;
    position: absolute;
    border-left: 1px dotted rgba(255, 255, 255, 0.4);
    border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
    width: 15px;
    border-radius: 1px;
}

It's far from solid indent guide, but it's some step forward:

jakewtaylor · 2017-09-22T06:06:00Z

@swordf1zh yes, I got that too but only once. Haven't seen it since.

@pie6k that's looks good. Your addition has given me an idea to slightly improve it, I'll give it a go when I'm in the office later.

Winston-Guess · 2017-09-22T09:20:06Z

@pie6k Your hack would be a perfect temporary solution except that it hasn't worked quite as well for me for some reason T_T (see pic below)

@jakewtaylor Can't wait 😄

ghost · 2019-06-06T16:36:14Z

Step by step instruction (for macOS)

Install https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css and restart VS Code

Save contents of this gist into some file, in my example it's /Users/semenov/.vscode/css/tree.css

Open Preferences > Settings, and add this setting:
    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]
Cmd-P, ">Enable custom CSS and JS", restart VS Code

Dismiss "Your VS Code is corrupted" message

After upgrading VS Code, repeat steps 4 and 5.

Well, it doesn't seems to make effect.

KamasamaK · 2019-06-12T15:42:46Z

This is currently on the June 2019 Iteration Plan #75103 as "Add support for indentation guides in trees".

joaomoreno · 2019-06-18T13:09:22Z

This has been pushed to master: 036278c It will be out tomorrow on Insiders! 🎆

It comes with a new setting workbench.tree.renderIndentGuides with the following options:

none, just don't render anything
onHover, render non-interesting guides only on hover. Always render interesting guides (selected, focused tree nodes).
always, render all guides all the time: both interesting and non interesting.

Remember to give it a spin this week and provide feedback! Again: should come out on tomorrow's Insiders.

dubeg · 2019-06-18T14:32:55Z

Is there any way to style it like in the first post, as in the line pointing to files/folders?
Also, ability to change the the line style as well: dotted, solid, ...?

├─ app
|  └─ main.js
├─ src
|  ├─ main.ts
|  └─ tsconfig.json
└─ package.json

joaomoreno · 2019-06-18T14:50:08Z

Is there any way to style it like in the first post, as in the line pointing to files/folders?
Also, ability to change the the line style as well: dotted, solid, ...?

Not for now, no. We're trying to meet both ends: address the challenge of hierarchy perception while keeping a consistent, lightweight visual style. We'll see how that goes.

pie6k · 2019-06-24T13:43:55Z

@joaomoreno it looks cool, but would be great if those guides would a bit more visible

Right now I can barely see it

Tanja-4732 · 2019-06-25T07:03:30Z

Right now I can barely see it

There should be an option to leave them as they are now.

KamasamaK · 2019-06-25T15:31:57Z

@joaomoreno There should be settings under workbench.colorCustomizations as the editor indent guides have, which would allow for some of the customizations people are asking for.

joaomoreno · 2019-06-26T08:07:52Z

@KamasamaK:

    "workbench.colorCustomizations": {
        "tree.indentGuidesStroke": "#ff0000"
    }

sayore · 2019-06-27T15:55:33Z

So.. wont there be horizontal lines to the files? It's kinda distant to the files. Moving the horizontal line a little bit to the right would also be really helpful to make it more visible/clear. (Im grateful for the lines either way but it would be a nice to have)

michaelvondung · 2019-07-05T20:59:51Z

I'd love an option between "none" and "onHover" that always shows the interesting guides, but doesn't show the non-interesting ones on hover.

pie6k · 2019-07-07T07:28:06Z

Would be also cool on hover to have all parent folders of hovered file highlighted

jcollum · 2019-07-14T18:42:26Z

If you want to get a decent alternative for this today:

"workbench.tree.indent": 32

Adjust as needed.

egamma added feature-request Request for new features or functionality workbench file-explorer Explorer widget issues labels Dec 23, 2016

kaiwood mentioned this issue Feb 24, 2017

Visual Studio code sidebar Vertical guideline (customize sidebar) #21295

Closed

gjsjohnmurray mentioned this issue May 29, 2019

Tree UI #74587

Closed

pie6k mentioned this issue Jun 13, 2019

Iteration Plan for June 2019 #75103

Closed

18 tasks

joaomoreno self-assigned this Jun 18, 2019

joaomoreno closed this as completed Jun 18, 2019

joaomoreno modified the milestones: Backlog, June 2019 Jun 18, 2019

octref mentioned this issue Jun 19, 2019

Indent guide overlaps with folder with no twistie #75773

Closed

usernamehw mentioned this issue Jun 19, 2019

[Tree Indent Guide] Misaligned with exploration icons #75782

Closed

This was referenced Jun 20, 2019

File explorer has strange line covering certain icon themes. #75794

Closed

Explorer Window Visually difficult to read #75838

Closed

joaomoreno added the on-testplan label Jun 24, 2019

joaomoreno mentioned this issue Jun 24, 2019

Test: Tree indent guides #76021

Closed

2 tasks

octref mentioned this issue Jun 27, 2019

Add color for tree.indentGuidesStroke nordtheme/visual-studio-code#145

Closed

octref mentioned this issue Jun 28, 2019

Can clicking open folder use non-dimmed color for indent guide? #76276

Closed

judos mentioned this issue Jul 5, 2019

package explorer indent horrible to read #76722

Closed

judos mentioned this issue Jul 18, 2019

package explorer icons do not align #77561

Closed

vscodebot bot locked and limited conversation to collaborators Aug 2, 2019

Directory tree indent guides in File Explorer #17777

Directory tree indent guides in File Explorer #17777

Comments

Avol-V commented Dec 23, 2016

cosmoKenney commented Jan 24, 2017

misantronic commented Feb 5, 2017

ScallyGames commented Mar 23, 2017

cosmoKenney commented Apr 1, 2017

chentel commented Apr 23, 2017

edmundo096 commented Jun 22, 2017

cosmoKenney commented Jun 22, 2017

roblourens commented Jun 22, 2017

edmundo096 commented Jun 22, 2017 • edited Loading

pie6k commented Jun 24, 2017

chentel commented Jul 7, 2017

goudcode commented Jul 11, 2017

jens1o commented Jul 11, 2017 • edited Loading

Winston-Guess commented Jul 13, 2017 • edited Loading

purefan commented Aug 11, 2017 • edited Loading

exectails commented Aug 19, 2017

bclarkbasly commented Aug 21, 2017

Livshitz commented Sep 11, 2017

kylehorn commented Sep 12, 2017 • edited Loading

phamduong commented Sep 18, 2017

petyrek commented Sep 18, 2017

jakewtaylor commented Sep 21, 2017 • edited Loading

tribal2 commented Sep 21, 2017

pie6k commented Sep 21, 2017 • edited Loading

jakewtaylor commented Sep 22, 2017

Winston-Guess commented Sep 22, 2017

ghost commented Jun 6, 2019

Step by step instruction (for macOS)

KamasamaK commented Jun 12, 2019

joaomoreno commented Jun 18, 2019 • edited Loading

dubeg commented Jun 18, 2019

joaomoreno commented Jun 18, 2019 • edited Loading

pie6k commented Jun 24, 2019

Tanja-4732 commented Jun 25, 2019

KamasamaK commented Jun 25, 2019

joaomoreno commented Jun 26, 2019

sayore commented Jun 27, 2019 • edited Loading

michaelvondung commented Jul 5, 2019

pie6k commented Jul 7, 2019

jcollum commented Jul 14, 2019 • edited Loading

edmundo096 commented Jun 22, 2017 •

edited

Loading

jens1o commented Jul 11, 2017 •

edited

Loading

Winston-Guess commented Jul 13, 2017 •

edited

Loading

purefan commented Aug 11, 2017 •

edited

Loading

kylehorn commented Sep 12, 2017 •

edited

Loading

jakewtaylor commented Sep 21, 2017 •

edited

Loading

pie6k commented Sep 21, 2017 •

edited

Loading

joaomoreno commented Jun 18, 2019 •

edited

Loading

joaomoreno commented Jun 18, 2019 •

edited

Loading

sayore commented Jun 27, 2019 •

edited

Loading

jcollum commented Jul 14, 2019 •

edited

Loading