Я согласен с этим. Я особенно нахожу, что отступы трудно интерпретировать. И еще хуже, когда в проводнике включены значки файлов.

Я также согласен! +1

Еще одна вещь, которая была бы хороша в этом отношении, — это настройка расстояния отступа следующего уровня иерархии.
Хотя я также хотел бы получить некоторые рекомендации, я думаю, что удвоение расстояния и, следовательно, более четкое разделение уже очень помогло бы.

@ Aides359 Я согласен. Глаза у всех разные. Просто посмотрите на вкладки. Некоторым людям нравятся 2 табуляции пробела в их коде. Некоторым нравится 8. Другим 4.

Я немного дислектик, поэтому мне очень тяжело с отступом в VS Code,

Хотя вроде стало немного лучше. Но, например, на экране моего ноутбука все еще плохо, тогда как на моих больших мониторах на работе он более заметен.

Да! Пожалуйста, линии дерева как вариант. Это было бы особенно полезно, когда редактор открыт в дальнем углу на большом мониторе.

Привязка переключателя к наведению мыши на панели проводника поможет сохранить чистый внешний вид.

Действительно полезно в больших проектах.
Есть новости по этому поводу? Или где я мог бы начать искать в источнике?

@ edmundo096 это было закрыто как дубликат # 21295, который также закрыт. Так что я думаю, что это никуда не денется.

@cosmoKenney Этот вопрос не закрыт...

@cosmoKenney , нет, это исходный пост, и он не разрешен. # 21295 был дубликатом.
Мне пока не удалось найти конфигурацию для включения этих направляющих отступов в проводнике боковой панели.

Так что да... мои глаза кровоточат. Я как what is index.js of Expression folder... I know you're there! .

Я думаю, что это должно иметь довольно высокий приоритет. Современные веб-приложения довольно часто имеют глубокую вложенную файловую структуру. см. этот пример

а вот примерный вид без лупы. не так уж и плохо... если у вас есть зрение летчика-истребителя

Я бы тоже этого хотел, в больших проектах довольно легко заблудиться.

Я также согласен, что это следует учитывать, даже когда вы начинаете крошечный проект и знаете каждый файл наизусть, это немного раздражает, когда вы хотите использовать проводник, а не «Быстрое открытие файлов» ...

Я согласен! Я пытался найти настройку или расширение, которое делает это в течение последних двух дней, но ничего Т_Т. Мне действительно трудно ориентироваться с помощью проводника (очень полезно, когда вы перемещаетесь по новому проекту).

Линии отступа были бы потрясающими!

Есть ли у нас какие-либо указания, есть ли это в дорожной карте?

+1

+1 это огромная боль для меня на моем большом мониторе.

++1

+1, одна из причин, по которой я могу вернуться к Атому

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

Сделанный!

Этот код делает отступ каждого уровня еще на 20 пикселей, начиная с 0 пикселей ( !important переопределяет значения по умолчанию), но, конечно, вы можете изменить это значение с 20 пикселей на любое другое, просто измените значения. Я также углубился только на 15 уровней, которые вы также можете расширить, но если ваш проект глубже 15 уровней, я бы посоветовал вам пересмотреть структуру каталогов. ;)

@jakewtaylor это отлично сработало для меня, единственная проблема заключается в том, что вы получите уведомление о «поврежденной установке» после внесения изменений ( .. больше информации здесь ).

@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 Ваш хак был бы идеальным временным решением, за исключением того, что у меня он почему-то не сработал T_T (см. рис. ниже)

@jakewtaylor Не могу дождаться 😄

У меня есть кое-что, что работает очень хорошо. Как вы сказали, далеко не идеально, но дерево файлов выглядит намного красивее, IMO.

Я поместил инструкции в этот Gist , так как CSS стал намного длиннее.

Выглядит так:

Надеюсь, это сработает для вас!

Это работает очень хорошо.
Спасибо.

Вы спасли мои глаза и мой разум.

Хорошее улучшение. Я изменил альфу с 0,4 на 0,1, и это выглядит великолепно, но это просто личное предпочтение. Если вы сможете сделать из этого расширение, оно точно будет одним из 25 лучших:

Думаю так и сделаю, надо будет посмотреть. 😃

Обновление: похоже, что редактирование пользовательского интерфейса с расширениями пока невозможно, вам придется просто использовать инструкции из Gist.

@Winston-Guess забыл сказать, что вам нужно position: relative на самом .monaco-tree .monaco-tree-rows>.monaco-tree-row .

@jakewtaylor @swordf1zh - выглядит потрясающе 🎉 🕺 ! Лол наконец!

О мой чертов бог. Я искал это 4 дня. Мне потребовалось некоторое время, чтобы понять, что название боковой панели не Монако. Пожалуйста, реализуйте это с различными вариантами.
Этот «стиль без линий» действительно сводит меня с ума, не видя линий или чего-то еще, что могло бы направлять мой взгляд.
+1 Всем, кто решил это.

о боже мой, это лучшее. куда отправить пожертвование!?

@edenprojectde Что вы подразумеваете под «название боковой панели не Moncao»? У вас есть разные имена классов в вашей установке? Я могу легко сделать несколько заметок в Gist, чтобы помочь людям в будущем.

@jakewtaylor Нет, я просто имею в виду, что во всех Css, которые я искал в графическом интерфейсе, было имя monaco, но не было указания на «боковую панель». Я только что перешел на VS Code, поэтому я не знал / не знал, как работает конфигурация графического интерфейса, это не так очевидно, как в атоме.

Просто чтобы понять суть:


Нет указания на боковую панель имени в этих именах классов.

Я полагаю, это потому, что это часть фреймворка, и сам VS Code не должен беспокоиться о том, что это скорее мое непонимание самого графического интерфейса.

Понятно, я только с помощью инспектора разобрался 😛

Пошаговая инструкция (для macOS)

1. Установите https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css и перезапустите VS Code.
2. Сохраните содержимое этого gist в какой-нибудь файл, в моем примере это /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 Да, просто измените суть CSS.

Текущий цвет — rgba(255, 255, 255, 0.4) , белый с непрозрачностью 40% — измените все вхождения этого цвета на нужный вам цвет.

rgba(0, 0, 0, 0.4) может хорошо подойти для светлого фона (черный с непрозрачностью 40%).

@jakewtaylor :
Спасибо, Джейк. Работает хорошо.
Теперь мне просто нужно выяснить, как осветлить вертикальные направляющие отступов на панели исходного кода. ;-)

+1 👍

@IlyaSemenov спасибо за взлом 👍

Кстати, кто-нибудь знает решение для увеличения вертикального пространства между элементами списка?

Это очень полезно, поэтому мне интересно, почему никто никогда не делал из этого расширения? Это было бы моим любимым.

Да ладно, Microsoft, вы поняли это в 95-м

Это определенно должно быть встроенной опцией в ближайшее время. Пожалуйста :)

Развивая идеи @chentel и @swordf1zh

Привязка переключателя к наведению мыши на панели проводника поможет сохранить чистый внешний вид.

Я изменил альфу с 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? На новые настройки ссылались здесь «Предоставить графический интерфейс для настроек # 3355», поэтому я спрашиваю

@fillipvt Проблема, на которую вы указали, касается графического интерфейса для настроек, эта проблема связана с внешним видом проводника. Я не думаю, что они родственники? (если я что-то не пропустил...?)

Какой-то менеджер четвертого уровня в Microsoft:
«Удалите линии, что бы вы ни делали весь день, это выглядит намного круче без этих уродливых линий».

+1

+1
2 подкаталога и я уже чувствую боль

Да, в проводнике сейчас бардак с чем-то большим, чем 1 слой папок. Кто-нибудь сделал PR с любым из предложений здесь? В этой ветке я видел действительно классно выглядящих модифицированных эксплореров.

+1

Пожалуйста, нам нужно больше контроля в этой области редактора! Спасибо! (без хакерского решения)

+1

@samdenty Я не могу получить доступ к твоей сути. Его перенесли или удалили?

Я сделал форк сути @jakewtaylor . Выглядит так же, как у самденти.
https://gist.github.com/thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c

Для себя я изменил уровень на 10.

Также есть небольшая проблема, которую я не знаю, как ее исправить. Я не знаю, была ли у samdenty такая же проблема. Сути его больше нет.

@thepixture Эта проблема, к сожалению, является побочным эффектом хакерского способа работы - она ​​просто повторяет вертикальную линию несколько раз. Личное мнение здесь, но em безопаснее, чем px (мой местный был изменен ;-) ).

@designbyadrian изменил мое имя пользователя, обновил ссылку https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

+1

В версии 1.31 был представлен новый виджет дерева. Будет ли проще рендеринг направляющих отступов с этим новым виджетом? @isidorn

Для тех, кто использует пользовательское расширение CSS, я исправил его для работы с новым обновлением от января 2019 г.
Я добавил 3 основных исправления,

1. Класс строки дерева был обновлен с monaco-tree-row до monaco-list-row
2. В пользовательском файле css, строка 21, у monica-tree-row было правило position: relative , которое вызывало проблемы с вертикальным интервалом.
3. В div .monaco-tl-twistie было встроенное правило margin-left: 40px , которое мне пришлось переопределить (строка 15).

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

Редактировать: я использовал суть @samdenty в качестве основы, но вам, возможно, придется настроить ее, чтобы она выглядела «правильно».

Редактировать 2: я исправил проблему с исчезновением линий при наведении или выборе папки глубиной более 3

Редактировать 3: Если вы играете с this , вы можете закомментировать правило monaco-tl-twistie (строки 15-17). Я не знал, что эта настройка существовала, когда я исправил css (и с помощью направляющих отступов я предпочитаю более узкие отступы, чем установка их на 0)

Спасибо @Lightfire228

Перестал работать с новым обновлением. Кроме того, теперь в строке заголовка есть раздражающее предупреждение [unsupported]. Ждем, пока 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 несколько недель назад и, как и все остальные, обнаружил, что очень сложно быстро определить, в каких каталогах находятся те или иные файлы.

Я просто установил для параметра Отступ дерева максимум 20, но в идеале я хотел бы установить его еще выше.

По-прежнему слишком сложно перемещаться по папкам без линий отступа дерева каталогов, как рекомендует исходный пост.

Я вижу, что эта проблема с 2016 года; Прошло 3 года, пожалуйста, добавьте несколько линий дерева.

Это своего рода нарушение условий сделки, и мне, возможно, придется вернуться к другому редактору тем временем.

Для всех, кто еще не сделал этого, пожалуйста, "большой палец вверх" начального комментария .
По открытым вопросам, отсортированным по знаку "палец вверх" ( is:issue is:open sort:reactions-+1-desc ), мы на данный момент только 18-е место!
Спасибо.

Я увеличил интервал отступа дерева до 20 пикселей, но по какой-то причине, когда я «перезагружаю» VS Code и/или закрываю и снова открываю его, интервал возвращается к исходному интервалу 8 пикселей. Вы можете визуально увидеть скачок интервала с моих 20 пикселей обратно на 8 пикселей.

Я тоже использую тему значков материалов. Когда я отключаю тему, проблема все еще сохраняется.

Просто интересно, может ли кто-нибудь создать для этого расширение VS Code. К сожалению, у меня нет опыта создания расширений VS Code (...пока)

Мои последние инсайдеры теперь имеют максимум 40 пикселей. Все еще скучаю по самому дереву жестко 🤷‍♂️

Просто интересно, может ли кто-нибудь создать для этого расширение VS Code. К сожалению, у меня нет опыта создания расширений VS Code (...пока)

Существует одно пользовательское расширение CSS, как описано в комментариях выше. Но это запрещено MicroSoft, вы получите предупреждение [unsupported] в строке заголовка, и оно перестанет работать каждый раз при обновлении кода VS. Ждем официального решения.

+1

это выглядит намного читабельнее, чем по умолчанию:

Чтобы исправить [Unsupported] при изменении исходных стилей, используйте https://github.com/lehni/vscode-fix-checksums .

_ Предупреждение [Unsupported] отображается, когда файлы ядра изменены (и их контрольная сумма отличается от исходной)._

Эта функция настолько важна, что ее следует поддерживать официально, а не просто какой-то хак, который нужно перенастраивать при каждом обновлении.

Забавно, я пытался использовать VSCode несколько лет назад и был действительно впечатлен, но даже тогда отступ и стиль боковой панели слишком сильно повлияли на читаемость, и я выбросил его для другой IDE. Возвращаясь к этому сейчас (это все еще хорошо!) Я очень удивлен, что это все еще проблема, и очевидно, что я не одинок в этом. Направляющие отступов дерева действительно улучшат читаемость: пожалуйста, поддержите эту настройку официально!

Спасибо за этот запрос функции. Я думал, что я единственный.

Для меня хуже всего то, что стрелки не выровнены с другими элементами на том же уровне:

Эта функция в настоящее время находится на # 12 (при заказе большим пальцем вверх)

Здесь уже 2 года...

+1, пожалуйста, исправьте это, мне помогла настройка Workbench > Tree: Indent на 19, но чувак! говорить о том, чтобы заблудиться в массивном дереве, по умолчанию это может работать нормально с 1 папкой, но... Вы даже заметите, что в VS2017 они добавили строки дерева к операторам if, чтобы вы могли понять, где вы находитесь на уровень {} отступов. где значок головной боли!

Тоже проблема для меня! Мне нужны строки, чтобы лучше сосредоточиться на написании кода; не пытаться каждый раз находить нужные файлы

Я нашел другую ветку, где они показали, что это было решено (путем настройки tree.indent в настройках)
https://github.com/Microsoft/vscode/issues/35447#issuecomment-455461013

@divintd Решение, о котором вы говорите, не совсем то же самое. Эта функция все еще открыта и относится к древовидным линиям, чтобы вы могли различать уровень вложенности в структуре папок вашего проекта. Уровень отступа на другой нити полезен, чтобы дать вашим глазам некоторое визуальное разделение, но на самом деле это не то же самое, что наличие визуальных направляющих отступов, которые вы можете получить с помощью линий дерева.

Временные обходные пути

Хотя я не думаю, что это идеальное решение, если вам трудно визуально увидеть местоположение файла для навигации по вашему проекту, вы можете добавить функцию хлебных крошек в верхнюю часть вашего редактора. Затем вы можете щелкнуть любой уровень этого, чтобы увидеть другие файлы на этом вложенном уровне и соответствующим образом перемещаться.

Другой способ: если вы знаете имя файла, который хотите открыть, быстро нажмите F1, а затем удалите на клавиатуре, что откроет представление файлов в палитре команд, а затем начните вводить имя файла. Удобно, что это также содержит поиск, а не начинается с. Это позволяет вам видеть доступные файлы и папку, в которой они находятся. Вы можете установить window.zoomLevel в вашем файле settings.json, чтобы размер был оптимальным для вашей эффективности.

Дополнительная идея для реализации

В качестве идеи расширения для реализации я предполагаю разные настраиваемые цветные линии для разных уровней отступов. Например, вы можете настроить уровни отступов, используя цвета радуги в файле 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, чтобы разрешить отписку только от комментариев, так же, как вы делаете здесь :smile:

Вы видели этот пост? 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. Сохраните содержимое этого gist в какой-нибудь файл, в моем примере это /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.

Ну, похоже, это не дает эффекта.

В настоящее время это находится в плане итерации № 75103 на июнь 2019 г. как «Добавить поддержку направляющих отступов в деревьях».

Это было отправлено на мастер-класс: https://github.com/microsoft/vscode/commit/036278c3ed0ef39274fa68e11e472fbd05f3e9d0 Завтра оно появится в Insiders! :фейерверк:

Он поставляется с новой настройкой workbench.tree.renderIndentGuides со следующими параметрами:

• none , просто ничего не визуализируйте
• onHover , отображать неинтересные направляющие только при наведении. Всегда отображайте интересные направляющие (выбранные, сфокусированные узлы дерева).
• always , постоянно отображать все руководства: как интересные, так и неинтересные.

Не забудьте попробовать его на этой неделе и оставить отзыв! Еще раз: должны выйти завтрашние инсайдеры.

Есть ли способ оформить его как в первом посте, как в строке, указывающей на файлы/папки?
Кроме того, возможность изменить стиль линии: пунктирная, сплошная, ...?

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

Есть ли способ оформить его как в первом посте, как в строке, указывающей на файлы/папки?
Кроме того, возможность изменить стиль линии: пунктирная, сплошная, ...?

Не сейчас, нет. Мы пытаемся достичь обеих целей: решить проблему восприятия иерархии, сохраняя при этом последовательный и легкий визуальный стиль. Посмотрим, как это пойдет.

@joaomoreno выглядит круто, но было бы здорово, если бы эти руководства были немного более заметными

Сейчас я едва вижу это

Сейчас я едва вижу это

Должна быть возможность оставить их такими, какие они есть сейчас.

@joaomoreno Должны быть настройки под workbench.colorCustomizations , как в руководствах по отступам редактора, что позволило бы выполнить некоторые настройки, о которых просят люди.

@КамасамаК :

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

Итак... не будет ли в файлах горизонтальных линий? Это довольно далеко от файлов. Перемещение горизонтальной линии немного вправо также было бы очень полезно, чтобы сделать ее более заметной/четкой. (Я благодарен за строки в любом случае, но было бы неплохо иметь)

Я бы хотел вариант между «none» и «onHover», который всегда показывает интересные руководства, но не показывает неинтересные при наведении.

Было бы также здорово, чтобы при наведении курсора выделялись все родительские папки зависшего файла.

Если вы хотите получить достойную альтернативу этому сегодня :

"workbench.tree.indent": 32

Отрегулируйте по мере необходимости.