我同意这一点。 我特别发现缩进很难解释。 在资源管理器中启用文件图标时更糟。

我也同意！ +1

在这方面另一件很好的事情是自定义下一级层次结构的缩进距离。
虽然我也喜欢一些指导方针，但我认为将 ie 的距离增加一倍，从而实现更清晰的分离已经有很大帮助。

@Aides359我同意。 每个人的眼光都不一样。 只看标签。 有些人喜欢在他们的代码中使用 2 个空格制表符。 有些喜欢 8。其他 4。

我有点阅读障碍，所以我真的很难理解 VS Code 中的缩进，

虽然它似乎变得更好了一些。 但是，例如，在我的笔记本电脑屏幕上它仍然很糟糕，而在我工作的大型显示器上，它的缩进更加明显。

是的！ 请选择树线。 当编辑器在大显示器的远角打开时，它会特别有用。

在资源管理器窗格中将切换按钮绑定到鼠标悬停有助于保持干净的外观。

在大型项目中非常有用。
这事有进一步更新吗？ 或者我可以从哪里开始寻找源代码？

@edmundo096这已作为 #21295 的副本关闭，该副本也已关闭。 所以我想这无济于事。

@cosmoKenney这个问题还没有结束......

@cosmoKenney ，不，这是原始帖子，尚未解决。 #21295 是重复的。
我还找不到在侧边栏资源管理器上启用此缩进指南的配置。

是的……我的眼睛在流血。 我喜欢what is index.js of Expression folder... I know you're there! 。

我认为它应该具有很高的优先级。 现代 Web 应用程序通常具有深层嵌套文件结构。 看这个例子

这是没有放大镜的大致外观。 还不错……如果你有战斗机飞行员的眼光

我也想要这个，在大型项目中很容易迷失方向。

我也同意应该考虑这一点，即使你开始一个小项目并且熟记每个文件，当你想使用资源管理器而不是“快速文件打开器”时找到它们有点烦人......

我同意！ 在过去的两天里，我一直在尝试寻找可以执行此操作的设置或扩展程序，但没有 T_T。 我真的很难使用资源管理器进行导航（在导航新项目时非常有用）。

缩进线会很棒！

如果这在路线图中，我们是否有任何迹象？

+1

+1 这对我的大显示器来说是一个巨大的痛苦。

++1

+1，我可能会回到 Atom 的原因之一

+1

请+1微软！

为此+1。

与此同时，我现在找到了一些解决方法：

找到您的 VSCode 安装（我的是C:/Program Files/Microsoft VS Code ）并转到resources/app/out/vs/workbench并打开workbench.main.css 。

将这些行添加到文件的末尾：

.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; }

完毕！

该代码从 0px 开始将每个级别进一步缩进 20px（ !important覆盖默认值），但当然您可以将其从 20px 更改为您想要的任意值，只需更改值即可。 我也只深入了 15 层，你也可以扩展它，但是如果你的项目比 15 层更深，我建议你重新评估你的目录结构。 ;)

@jakewtaylor这对我很有用，唯一的问题是您在进行更改后会收到“安装损坏”通知（ ..more info here ）。

@jakewtaylor @swordf1zh你能提供一些关于这个“黑客”的截图吗？

受您的想法启发，我创建了以下样式：

.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;
}

它远非可靠的缩进指南，但它向前迈出了一步：

@swordf1zh是的，我也得到了，但只有一次。 从那以后就没见过了。

@pie6k看起来不错。 您的添加让我有了稍微改进的想法，我稍后在办公室时会尝试一下。

@pie6k您的 hack 将是一个完美的临时解决方案，只是由于某种原因它对我来说效果不佳 T_T（见下图）

@jakewtaylor等不及了😄

我有一些效果很好的东西。 就像你说的，远非完美，但让文件树看起来更漂亮，IMO。

由于 CSS 现在更长了，因此我已将说明放在此 Gist中。

看起来像这样：

希望对你有帮助！

这工作得很好。
谢谢你。

你拯救了我的眼睛和心灵。

不错的改进。 我将 alpha 从 0.4 更改为 0.1，看起来不错，但这只是个人喜好。 如果您可以对此进行扩展，那么它肯定会成为 top25 之一：

我想我会这样做的，我必须调查一下。 😃

更新：似乎暂时无法使用扩展编辑 UI，您必须使用 Gist 中的说明。

@Winston-Guess 忘了告诉你.monaco-tree .monaco-tree-rows>.monaco-tree-row本身需要position: relative 。

@jakewtaylor @swordf1zh - 看起来棒极了🎉🕺！ 终于大声笑了！

哦，我的该死的上帝。 我现在搜索了4天。 我花了一段时间才明白侧边栏的名字不是摩纳哥。 请使用不同的变体来实现这一点。
这种“无线条风格”真的让我发疯，看到没有线条或其他任何东西来引导我的眼睛。
+1 关于解决此问题的每个人。

哦，天哪，这是最好的。 我在哪里发送捐款！？

@edenprojectde “侧边栏的名称不是Moncao”是什么意思？ 你的安装有不同的类名吗？ 我可以轻松地在 Gist 中添加一些注释，以帮助未来的人们。

@jakewtaylor不，我只是说我在 gui 中查找的所有 Css 都有名字 monaco，但没有“侧边栏”的指示。 我刚刚更改为 VS Code，所以我不/不知道 gui 的配置是如何工作的，因为它在 atom 中并不明显。

只是为了说明问题：


这些类名中没有名称侧边栏的指示。

我想这是因为它是框架的一部分，VS Code 本身不应该担心它，而是我缺乏对 GUI 本身的理解。

我明白了，我只是通过使用检查器来解决的😛

分步说明（适用于 macOS）

1. 安装https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css并重启 VS Code
2. 将此要点的内容保存到某个文件中，在我的示例中为/Users/semenov/.vscode/css/tree.css
3. 打开首选项 > 设置，然后添加此设置：

    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]

1. Cmd-P, ">启用自定义 CSS 和 JS", 重启 VS Code
2. 关闭“您的 VS 代码已损坏”消息

升级 VS Code 后，重复步骤 4 和 5。

@IlyaSemenov出于某种原因，您的方法在普通版本和内部版本中都不适合我。 我在扩展程序的说明中看到第 4 步需要管理员权限，但这对我也没有帮助😕

扩展和自定义 CSS 似乎对我有用，但线条颜色面向较暗的主题。 看屏幕截图...

...建议？

@cosmoKenney是的，只需更改gist中的 CSS。

当前颜色是rgba(255, 255, 255, 0.4) ，它是 40% 不透明度的白色 - 将所有出现的颜色更改为您想要的颜色。

rgba(0, 0, 0, 0.4)可能适用于浅色背景（40% 不透明度的黑色）

@jakewtaylor ：
谢谢杰克。 效果很好。
现在我只需要弄清楚如何减轻源窗格中的垂直缩进指南。 ;-)

+1 👍

@IlyaSemenov感谢黑客攻击👍

顺便说一句，有人知道增加列表项之间垂直空间的解决方案吗？

这非常有用，所以我想知道为什么没有人对其进行扩展？ 这将是我的最爱。

来吧微软，你在 95 年就知道了

这肯定需要很快成为一个内置选项。 请 ：）

扩展来自@chentel和@swordf1zh的想法

在资源管理器窗格中将切换按钮绑定到鼠标悬停有助于保持干净的外观。

我将 alpha 从 0.4 更改为 0.1，看起来很棒

我已经分叉了@jakewtaylor的要点，以使其更易于导航。 => https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

• 最后一个树项删除了底线
• 文件夹和文件可以通过线宽区分
• 线条通常几乎是透明的，但悬停时不透明度会增加

之前与之后

:root {
  /** Width of the lines **/
  --tree-width: 14px;
  /** Opacity of the lines whilst not hovered **/
  --tree-opacity: 0.05;
  /** Opacity of the lines on hover **/
  --tree-opacity-hover: 0.2;
  /** Color of the lines **/
  --tree-color: rgb(255, 255, 255);
}

这就是我要找的。

+1
有什么计划来实现这个急需的功能吗？

在我看来，这应该是默认设置，并带有一个内置选项来禁用它😬

@miguelkashir我同意，我认为对该线程的回复数量足以说明需要将此作为内置功能？

同意。 虽然我感谢提供 CSS 变通办法的人的努力，但这应该在产品中。 目前，Explorer 在具有大型显示器的大型项目中变得非常难以使用。 来吧微软 - 请修复！

作为一个通缉的请求撞起来

+1

如果有人在创建自定义 CSS 文件并在"vscode_custom_css.imports"中引用它后没有看到任何更改，您可以使其工作更简单，无需安装vscode-custom-css - 只需将 CSS 添加到末尾workbench.main.css ，一切顺利！

@Funghorn和我的要点一模一样😛

@jakewtaylor是的，但我认为有些人会使用@samdenty99的“修补”版本，并且自定义 CSS 文件并不适合所有人¯_(ツ)_/¯

+1

+1

伙计们，请停止评论+1。 对于订阅等待解决方案的人来说，这很烦人，只需对最初的帖子做出反应。 😋

Code - Insiders build 中是否有此选项？ 此处引用了新设置“为设置 #3355 提供 GUI”，这就是我问的原因

@fillipvt您链接的问题与设置的GUI有关，此问题与文件资源管理器的外观有关。 我觉得他们没有关系？ （除非我错过了什么……？）

微软的一些 4 级经理：
“去掉线条，不管你整天做什么，没有那些丑陋的线条，它看起来会更酷。”

+1

+1
2个子目录，我已经感到痛苦了

是的，资源管理器现在一团糟，只有一层文件夹。 有没有人对这里的任何提案进行过 PR？ 我在这个线程中看到了一些非常漂亮的改装探险家

+1

请我们在编辑器的这方面需要更多控制！ 谢谢！ （没有hacky解决方案）

+1

@samdenty我无法访问您的要点。 它是否已被移动或删除？

我对@jakewtaylor的要点做了一个分支。 它看起来和samdenty的一样。
https://gist.github.com/thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c

对我来说，我将级别更改为 10。

还有一个小问题不知道怎么解决。 我不知道samdenty是否有同样的问题。 他的主旨已不复存在。

@thepixture遗憾的是，这个问题是它工作方式的副作用 - 它只是重复垂直线几次。 这里的个人意见，但em比px更安全（我的本地已更改;-)）。

@designbyadrian更改了我的用户名，更新了链接https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

+1

在 v1.31 中，引入了一个新的树小部件。 使用那个新的小部件会更容易渲染缩进指南吗？ @isidorn

对于使用自定义 CSS 扩展的任何人，我已将其修复为与 2019 年 1 月的新更新一起使用
我添加了 3 个主要修复程序，

1. 树行类从monaco-tree-row更新为monaco-list-row
2. 在自定义 css 文件第 21 行中， monica-tree-row有一个position: relative规则，这会导致垂直间距问题
3. .monaco-tl-twistie div 有一个内联margin-left: 40px规则，我必须覆盖它（第 15 行）

https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2

编辑：我使用@samdenty的要点作为基础，但您可能需要对其进行调整以使其看起来“正确”

编辑 2：我修复了悬停或选择超过 3 深的文件夹时线条消失的问题

编辑 3：如果你玩这个，你可以注释掉monaco-tl-twistie规则（第 15-17 行）。 当我修复 css 时，我不知道该设置存在（并且使用缩进指南，我更喜欢更紧密的缩进而不是将其设置为 0）

谢谢@Lightfire228

停止使用新更新。 另外，现在标题栏中有一个烦人的 [不支持] 警告。 等待 MS 更新资源管理器。

+1

我和其他人一样表达同样的观点； 树结构的缩进太小而无法有效地描绘子结构。

请给我们一些选项来改变这一点。

对于 vscode 1.31
https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709

所以这是现在vscode设置的一部分，但为什么限制在最多20个？

我来自 Sublime 并且习惯了更深的缩进，有充分的理由不允许更深的缩进吗？

vscode max 20 Tree Indent left与sublime text 3 right

@alexcroox阅读： https ://github.com/Microsoft/vscode/issues/67576

我几乎放弃了 VS Code。 我很难看到这些文件。 而且由于我有一个 Visual Studio 订阅，使用 VS 2017 几乎是轻而易举的事。一旦你设置好它，它就比 Code 好得多。

啊，谢谢， @sguilla - 能够更改缩进大小为我解决了大部分问题！

几周前我刚开始使用 VS Code，和其他人一样，我发现很难快速判断某些文件在哪些目录中。

我只是将 Tree Indent 选项设置为最大 20，但理想情况下我想将它设置得更高。

正如原始帖子所推荐的那样，在没有目录树缩进行的情况下导航文件夹仍然太难了。

我看到这个问题是从 2016 年开始的； 已经3年了，请添加一些树线。

这有点破坏交易，同时我可能不得不切换回另一个编辑器。

还没有点赞的小伙伴们，请先点个赞。
对于未解决的问题，按赞数排序 ( is:issue is:open sort:reactions-+1-desc )，我们目前仅排在第 18 位！
谢谢。

我已将树缩进间距增加到 20px，但由于某种原因，当我“重新加载”VS Code 和/或关闭并重新打开它时，间距会恢复为原始的 8px 间距。 您可以直观地看到间距从我的 20px 设置跳回 8px。

我也在使用 Material Icon Theme。 当我禁用主题时，问题仍然存在。

只是想知道是否有人可以为此创建一个 VS Code 扩展。 可悲的是，我没有创建 VS Code 扩展的经验（......尚未）

我最新的内部人员现在最大为 40 像素。 仍然想念树本身的坚韧🤷‍♂️

只是想知道是否有人可以为此创建一个 VS Code 扩展。 可悲的是，我没有创建 VS Code 扩展的经验（......尚未）

有一个自定义 CSS 扩展，如上面的注释中所述。 但是这被微软禁止了，你会在标题栏中得到一个 [不支持] 警告，并且每次 VS 代码更新时它都会停止工作。 等待官方解决方案。

+1

这看起来比默认值更具可读性：

要在修改原始样式时修复[Unsupported] ，请使用https://github.com/lehni/vscode-fix-checksums

_ 修改核心文件时会显示[Unsupported]警告（并且它们的校验和与原始文件不同）。_

此功能非常重要，应该得到官方支持，而不仅仅是每次更新都必须重新配置的一些hackaround。

有趣的是，几年前我尝试使用 VSCode 并印象深刻，但即便如此，侧边栏的缩进和样式对可读性的影响太大了，我把它扔给了另一个 IDE。 现在回到它（它仍然很好！）我非常惊讶这仍然是一个问题，显然我并不孤单。 树缩进指南将真正提高可读性：请正式支持此自定义！

感谢此功能请求。 我以为我是唯一的一个。

对我来说，最糟糕的是箭头没有与同一级别的其他元素对齐：

此功能目前位于 #12（按赞排序时）

这里已经有2年了...

+1，请解决这个问题，将 Workbench > Tree: Indent 设置为 19 对我有帮助，但是伙计！ 谈论迷失在一棵巨大的树中，它可能在默认情况下使用 1 个文件夹可以正常工作，但是......您甚至会注意到，在 VS2017 中，他们将树行添加到 if 语句中，以便您可以弄清楚您在哪里{} 缩进级别。 头痛图标在哪里！

对我来说也是个问题！ 我需要线条以便更好地专注于编写代码； 每次都无需费力地找到正确的文件

我发现了另一个线程，他们表明已经解决了这个问题（通过在设置中调整 tree.indent）
https://github.com/Microsoft/vscode/issues/35447#issuecomment -455461013

@divinentd您所指的解决方案并不完全相同。 此功能仍处于打开状态，并且与树线相关，以便您可以识别项目文件夹结构中的嵌套级别。 另一个线程上的缩进级别有助于让您的眼睛在视觉上有所分离，但与您可以通过树线获得的视觉缩进指南并不完全相同。

临时解决方法

虽然我认为这不是一个完美的解决方案，但如果您确实难以直观地看到文件在项目中导航的位置，那么您可以将面包屑功能添加到编辑器的顶部。 然后，您可以单击该级别的任何级别以查看该嵌套级别内的其他文件并相应地导航。

另一种方法是，如果您知道要打开的文件的名称，请快速按 F1，然后在键盘上删除，这会在命令面板中显示文件视图，然后开始输入文件的名称。 方便的是，这也是一个包含搜索，而不是一个开头。 这使您能够查看可用的文件以及它们所在的文件夹。 您可以在您的 settings.json 文件中设置 window.zoomLevel 以使大小适合您的效率。

实施的附加想法

作为实现的扩展想法，我设想了不同级别的缩进不同的可配置彩色线条。 例如，您可以使用 settings.json 文件中的彩虹颜色设置缩进级别。 当然，如果线条颜色、样式和粗细都是可配置的选项，那就太好了。

• 红色 - 1 级
  -- 橙色 - 2 级
  --- 黄色 - 3 级
  ---- 绿色 - 4 级
  ----- 蓝色 - 5 级
  ------ 靛蓝 - 6 级
  -------- 紫罗兰色 - 7 级

我也很想看到这个功能很快就会出现在 VS Code 中，并且喜欢这个项目的发展方向。干得好，伙计们！

问，你将被忽略

对于按 👍（竖起大拇指）排序的未解决问题，我们仍排在第 12 位，但我们正在迅速缩小差距。

# | 公开问题 | :+1: | :-1: | ：心：
-- | ---------- | ---- | ---- | --------
1 | 允许浮动窗口 | 2909 | 40 | 416
2 | 集成终端的标签 | 第1293章 16 | 128
3 | vscode.extensions 在不重新启动的情况下安装/删除/禁用扩展时不会更新| 第922章 0 | 47
4 | 允许更改工作台的字体大小和字体 | 917 | 1 | 123
5 | 刷新 VS Code 产品图标 | 第825章 18 | 303
6 | Git：使用 VS Code 作为合并编辑器 | 第669章 0 | 105
7 | 支持在多个 VS Code 窗口中打开一个项目文件夹 | 630 | 0 | 72
8 | 自动缩进/代码格式化/美化| 第589章 0 | 45
9 | 微距录制 | 第586章 0 | 73
10 | 添加选项以固定选项卡，类似于 Visual Studio | 第553章 0 | 73
11 | 允许自定义鼠标快捷键 | 521 | 0 | 57
12 | 👉文件资源管理器中的目录树缩进指南👈 | 503 | 0 | 84
13 | 提供跨机器同步设置的支持 | 第429章 0 | 62
14 | 在选项卡而不是侧边栏中显示搜索结果 | 423 | 0 | 73

还没有这样做的人，请👍（竖起大拇指）开始评论。

我希望你 +1 垃圾邮件发送者可以骚扰 github，只允许退订评论，就像你在这里做的一样：微笑：

你看到这个帖子了吗？ https://simonholman.blog/visual-studio-code-finally-has-a-tree-indent-setting/
似乎“文件资源管理器中的目录树缩进指南”正在工作。
在设置中搜索“树缩进”
设置 > 工作台 > 树缩进。

@RoelandJimenez是的，我们在上面讨论过。 这与拥有线条不同，而是朝着正确方向迈出的一步。

这个功能应该让每个程序都有一个文件资源管理器！

任何更新？

@Ninroot不要像这样纠缠开发人员。 当讨论发生或工单状态发生变化时，我们会收到更新。

请添加此功能！！！！！！！！！！

+1

人们，看在上帝的份上，请停止向这张票发送垃圾邮件。 VS Code 团队知道这个请求。
如果您想说“+1”，只需投票并选择您的反应（表情符号举手）。 这就是它在这个存储库中的工作方式

+1

@kanlukasz Github 最近添加了一个新功能。 我们只能订阅重要的更改，而不能订阅+1 me too pls fix !!!!!! 🎉🎉🎉🎉🎉🎉🎉🎉🎉

亲爱的+1垃圾邮件发送者，你不会再拥有我了。

分步说明（适用于 macOS）

1. 安装https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css并重启 VS Code
2. 将此要点的内容保存到某个文件中，在我的示例中为/Users/semenov/.vscode/css/tree.css
3. 打开首选项 > 设置，然后添加此设置：

    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]

1. Cmd-P, ">启用自定义 CSS 和 JS", 重启 VS Code
2. 关闭“您的 VS 代码已损坏”消息

升级 VS Code 后，重复步骤 4 和 5。

嗯，好像没有效果。

这目前在 2019 年 6 月的迭代计划 #75103 中作为“添加对树中缩进指南的支持”。

这个已经推到高手了： https ://github.com/microsoft/vscode/commit/036278c3ed0ef39274fa68e11e472fbd05f3e9d0 明天Insider上！ ：烟花：

它带有一个带有以下选项的新设置workbench.tree.renderIndentGuides ：

• none ，只是不渲染任何东西
• onHover ，仅在悬停时呈现非有趣的指南。 始终呈现有趣的指南（选定的、聚焦的树节点）。
• always ，一直渲染所有指南：有趣和不有趣。

记得在本周试一试并提供反馈！ 再说一遍：明天的 Insiders 应该会出来。

有没有办法像第一篇文章中那样设置它的样式，就像指向文件/文件夹的行一样？
此外，还可以更改线条样式：虚线、实线、...？

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

有没有办法像第一篇文章中那样设置它的样式，就像指向文件/文件夹的行一样？
此外，还可以更改线条样式：虚线、实线、...？

暂时不行，不行。 我们试图满足两端：解决层次感知的挑战，同时保持一致、轻量级的视觉风格。 我们会看看情况如何。

@joaomoreno它看起来很酷，但如果这些指南能更明显一点会很棒

现在我几乎看不到它

现在我几乎看不到它

应该有一个选择让他们保持现在的状态。

@joaomoreno workbench.colorCustomizations下应该有编辑器缩进指南所具有的设置，这将允许人们要求进行一些自定义。

@KamasamaK ：

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

所以..文件不会有水平线吗？ 离档案有点远。 将水平线向右移动一点也非常有助于使其更加可见/清晰。 （无论哪种方式，我都很感谢这些台词，但如果有的话会很高兴）

我喜欢“无”和“onHover”之间的选项，它总是显示有趣的指南，但不显示悬停时不感兴趣的指南。

悬停时突出显示悬停文件的所有父文件夹也会很酷

如果您今天想为此获得一个不错的选择：

“workbench.tree.indent”：32

根据需要进行调整。