Eu concordo com isto. Acho especialmente que o recuo é difícil de interpretar. E é ainda pior quando os ícones de arquivos estão habilitados no explorer.

Eu também concordo! +1

Outra coisa que seria legal nesse sentido é personalizar a distância de recuo do próximo nível de hierarquia.
Enquanto eu também adoraria algumas diretrizes, acho que ter o dobro da distância e, assim, ter uma separação mais clara já ajudaria muito.

@Aides359 Concordo. Os olhos de todos são diferentes. Basta olhar para as abas. Algumas pessoas gostam de 2 abas de espaço em seu código. Alguns gostam de 8. Outros 4.

Eu sou um pouco disléxico, então eu realmente tenho dificuldade com o recuo no VS Code,

Embora pareça ter melhorado um pouco. Mas ainda é ruim na tela do meu laptop, por exemplo, enquanto nos meus monitores grandes no trabalho, é mais recuado.

Sim! Por favor, linhas de árvore como uma opção. Seria especialmente útil quando o editor estivesse aberto em um canto distante em um monitor grande.

Amarrar a alternância para passar o mouse no Explorer Pane ajudaria a manter a aparência limpa.

Muito útil em grandes projetos.
alguma atualização disso? Ou onde eu poderia começar a procurar na fonte?

@edmundo096 isso foi fechado como duplicação de #21295, que também está fechado. Então eu acho que isso não vai a lugar nenhum.

@cosmoKenney Este problema não está encerrado...

@cosmoKenney , não, este é o post original e não foi resolvido. #21295 era a duplicata.
Ainda não consegui encontrar uma configuração para habilitar esses guias de recuo no Sidebar Explorer.

Então sim... meus olhos estão sangrando. Eu sou como what is index.js of Expression folder... I know you're there! .

Acho que deveria ter uma prioridade bem alta. Os aplicativos da Web modernos geralmente têm uma estrutura de arquivos aninhada profunda. veja este exemplo

e aqui está a aparência aproximada sem Lupa. não é tão ruim... se você tem a visão de um piloto de caça

Eu gostaria disso também, é muito fácil se perder em projetos maiores.

Eu também concordo que isso deve ser considerado, mesmo quando você inicia um projeto pequeno e conhece todos os arquivos de cor, é meio chato encontrá-los quando você quer usar o explorer, e não o "Quick File Opener"...

Eu concordo! Estou tentando procurar uma configuração ou extensão que faça isso nos últimos dois dias, mas nada T_T. Eu realmente luto para navegar usando o explorer (muito útil quando você está navegando em um novo projeto).

Linhas de recuo seriam incríveis!

Temos alguma indicação se isso está no roteiro?

+1

+1 isso é uma dor enorme para mim no meu monitor grande.

++1

+1, uma razão pela qual eu poderia voltar ao Atom

+1

+1 Microsoft por favor!

+1 para isso.

Enquanto isso, encontrei um truque para resolvê-lo por enquanto:

Encontre sua instalação do VSCode (a minha era C:/Program Files/Microsoft VS Code ) e vá para resources/app/out/vs/workbench e abra workbench.main.css .

Adicione estas linhas ao final do arquivo:

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

Feito!

Esse código recua cada nível em mais 20px, começando em 0px (o !important substitui os valores padrão), mas é claro que você pode alterar isso de 20px para o quanto quiser, apenas altere os valores. Também aprofundei apenas 15 níveis, que você também pode expandir, mas se seu projeto for mais profundo do que 15 níveis, sugiro que você reavalie sua estrutura de diretórios. ;)

@jakewtaylor isso funcionou muito bem para mim, o único problema é que você receberá uma notificação de 'instalação corrompida' depois de fazer as alterações ( ..mais informações aqui ).

@jakewtaylor @swordf1zh você poderia fornecer uma captura de tela com este 'hack'?

Inspirado na sua ideia, criei estilos como:

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

Está longe de ser um guia de recuo sólido, mas é um passo à frente:

@swordf1zh sim, eu consegui isso também, mas apenas uma vez. Não o vejo desde então.

@pie6k isso parece bom. Sua adição me deu uma ideia para melhorá-lo um pouco, vou tentar quando estiver no escritório mais tarde.

@pie6k Seu hack seria uma solução temporária perfeita, exceto que não funcionou tão bem para mim por algum motivo T_T (veja a foto abaixo)

@jakewtaylor Mal posso esperar 😄

Tenho algo que funciona muito bem. Como você disse, longe de ser perfeito, mas torna a árvore de arquivos muito mais bonita, IMO.

Eu coloquei as instruções neste Gist , pois o CSS é muito mais longo agora.

Se parece com isso:

Espero que funcione para você!

Isso está funcionando muito bem.
Obrigada.

Você salvou meus olhos e minha mente.

Bela melhoria. Mudei o alfa de 0,4 para 0,1 e ficou ótimo, mas é apenas uma preferência pessoal. Se você puder fazer uma extensão disso, seria um dos top25 com certeza:

Acho que vou fazer isso, vou ter que pesquisar. 😃

Atualização: Parece que editar a interface do usuário com extensões não é possível por enquanto, você terá que usar apenas as instruções do Gist.

@Winston-Guess esqueceu de dizer que você precisa de position: relative em .monaco-tree .monaco-tree-rows>.monaco-tree-row .

@jakewtaylor @swordf1zh - parece incrível 🎉 🕺 ! Lu finalmente!

Oh meu Deus maldito. Eu procurei por isso 4 dias agora. Demorei um pouco para entender que o nome da barra lateral não é Mônaco. Por favor, implemente isso com diferentes variações.
Este 'estilo sem linhas' está realmente me deixando louco, não vendo linhas ou qualquer outra coisa para guiar meus olhos.
+1 Em todos que fizeram uma solução para isso.

oh meu Deus, este é o melhor. para onde envio uma doação!?

@edenprojectde O que você quer dizer com "o nome da barra lateral não é Moncao"? Você tem nomes de classe diferentes em sua instalação? Eu posso facilmente colocar algumas notas no Gist para ajudar as pessoas no futuro.

@jakewtaylor Não, apenas quero dizer que todos os CSS que procurei no gui tinham o nome monaco, mas nenhuma indicação de "barra lateral". Acabei de mudar para o VS Code, então não sabia/não sei como a configuração do gui funciona, não é óbvio como estava no átomo.

Só para entender o ponto:


Nenhuma indicação da barra lateral do nome nesses nomes de classe.

Suponho que seja porque faz parte da estrutura, nada que o próprio VS Code deve se preocupar, é mais a minha falta de compreensão da própria GUI.

Entendo, só dei certo usando o inspetor 😛

Instruções passo a passo (para macOS)

1. Instale https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css e reinicie o VS Code
2. Salve o conteúdo desta essência em algum arquivo, no meu exemplo é /Users/semenov/.vscode/css/tree.css
3. Abra Preferências > Configurações e adicione esta configuração:

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

1. Cmd-P, "> Ativar CSS e JS personalizados", reinicie o VS Code
2. Ignorar a mensagem "Seu código VS está corrompido"

Após atualizar o VS Code, repita as etapas 4 e 5.

@IlyaSemenov, por algum motivo, seu método não está funcionando para mim nas versões normal e insiders. Vi nas instruções da extensão que o passo 4 requer privilégios de administrador, mas isso também não me ajudou 😕

A extensão e o CSS personalizado parecem funcionar para mim, mas as cores das linhas são orientadas para os temas mais escuros. Veja a captura de tela...

...sugestões?

@cosmoKenney Sim, basta alterar o CSS na essência .

A cor atual é rgba(255, 255, 255, 0.4) , que é branca com 40% de opacidade - altere todas as ocorrências para a cor desejada.

rgba(0, 0, 0, 0.4) pode funcionar bem para fundos claros (preto com 40% de opacidade)

@jakewtaylor :
Obrigado Jaque. Funciona bem.
Agora eu só tenho que descobrir como iluminar as guias de recuo vertical no painel de origem. ;-)

+1 👍

@IlyaSemenov obrigado pelo hack 👍

btw alguém conhece uma solução para aumentar o espaço vertical entre os itens da lista?

Isso é muito útil, então eu me pergunto por que ninguém nunca fez uma extensão disso? Seria meu favorito.

Vamos Microsoft, você descobriu em '95

Isso definitivamente precisa ser uma opção integrada em breve. Por favor :)

Expandindo as ideias de @chentel e @swordf1zh

Amarrar a alternância para passar o mouse no Explorer Pane ajudaria a manter a aparência limpa.

Mudei o alfa de 0,4 para 0,1 e ficou ótimo

Eu bifurquei a essência de @jakewtaylor para facilitar a navegação. => https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

• O último item da árvore obtém a linha de fundo removida
• Pastas e arquivos são distinguíveis pela largura da linha
• As linhas são quase transparentes normalmente, mas aumentam a opacidade ao passar o mouse

Antes vs depois

: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);
}

Isso é o que eu estou procurando.

+1
algum plano para implementar esse recurso tão necessário?

Na minha opinião, isso deve ser por padrão e com uma opção integrada para desativá-lo 😬

@miguelkashir Eu concordo e acho que o número de respostas a este tópico fala muito sobre a necessidade disso como um recurso interno?

Aceita. Embora eu aprecie os esforços das pessoas que forneceram soluções alternativas de CSS, isso deve estar no produto. O Explorer torna-se extremamente difícil de usar em um projeto grande com monitores grandes como está no momento. Vamos Microsoft - por favor, corrija!

Batendo como um pedido desejado

+1

Se alguém não estiver vendo nenhuma alteração depois de criar um arquivo CSS personalizado e referenciá-lo no "vscode_custom_css.imports" , você pode fazê-lo funcionar muito mais simples e sem instalar o vscode-custom-css - basta adicionar o CSS ao final do workbench.main.css e pronto!

@Funghorn Exatamente como na minha essência 😛

@jakewtaylor sim, mas imaginei que algumas pessoas usariam a versão "remendada" do @samdenty99 e o arquivo CSS personalizado não está funcionando para todos ¯_(ツ)_/¯

+1

+1

Pessoal, parem de comentar +1. É chato para as pessoas inscritas esperando por soluções, apenas 👍 reaja a postagem inicial. 😋

Existe uma opção para isso na compilação Code - Insiders? As novas configurações foram referenciadas aqui "Fornecer GUI para configurações # 3355", por isso pergunto

@fillipvt O problema que você vinculou diz respeito a uma GUI para configurações, esse problema é sobre a aparência do explorador de arquivos. Eu não acho que eles estão relacionados? (a menos que eu tenha perdido alguma coisa...?)

Alguns gerentes de nível 4 da Microsoft:
"Remova as linhas, fica muito mais legal o que quer que você faça o dia todo sem essas linhas feias."

+1

+1
2 subdiretórios e já sinto a dor

Sim, o explorador está uma bagunça agora com mais de 1 camada de pastas. Alguém já fez um PR com alguma das propostas aqui? Eu vi alguns exploradores modificados realmente ótimos neste tópico

+1

Por favor, precisamos de mais controle nesta área do editor! Obrigada! (Sem a solução hacky)

+1

@samdenty Não consigo acessar sua essência. Foi movido ou excluído?

Eu fiz um fork da essência do @jakewtaylor . Parece igual ao da samdenty.
https://gist.github.com/thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c

Para mim eu mudei o nível para 10.

Também há um pequeno problema que eu não sei como corrigi-lo. Não sei se a samdenty teve o mesmo problema. Sua essência não existe mais.

@thepixture Esse problema é, infelizmente, um efeito colateral da maneira hacky como funciona - ele simplesmente repete a linha vertical várias vezes. Opinião pessoal aqui, mas em é mais seguro que px (o meu local foi alterado ;-) ).

@designbyadrian mudou meu nome de usuário, link atualizado https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

+1

Na v1.31, um novo widget de árvore foi introduzido. A renderização de guias de recuo seria mais fácil com esse novo widget? @isidorn

Para quem usa a extensão CSS personalizada, corrigi-a para funcionar com a nova atualização de janeiro de 2019
Havia 3 correções principais que adicionei,

1. A classe da linha da árvore foi atualizada de monaco-tree-row para monaco-list-row
2. No arquivo CSS personalizado, linha 21, o monica-tree-row tinha uma regra position: relative , o que causava problemas de espaçamento vertical
3. A div .monaco-tl-twistie tinha uma regra margin-left: 40px inline, que eu tive que substituir (linha 15)

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

Edit: eu usei a essência do @samdenty como base, mas você pode ter que ajustá-lo para parecer 'certo'

Editar 2: corrigi um problema com as linhas desaparecendo ao passar o mouse ou selecionar uma pasta com mais de 3 profundidade

Edit 3: Se você jogar com isso , você pode comentar a regra monaco-tl-twistie (linhas 15-17). Eu não sabia que essa configuração existia quando consertei o css (e com os guias de recuo, prefiro um recuo mais apertado do que definir isso como 0)

Obrigado @Lightfire228

Parou de funcionar com a nova atualização. Além disso, agora há um aviso irritante [sem suporte] na barra de título. Aguardando o MS atualizar o explorer.

+1

Estou ecoando os mesmos sentimentos que todos os outros; o recuo da estrutura da árvore é muito pequeno para delinear efetivamente as subestruturas.

Por favor, dê-nos algumas opções para mudar isso.

Para vscode 1.31
https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709

Portanto, isso faz parte das configurações do vscode agora, mas por que está limitado a no máximo 20?

Eu venho do Sublime e estou acostumado a um recuo muito mais profundo, há uma boa razão para não permitir um recuo mais profundo?

vscode max 20 Tree Indent left vs sublime text 3 right

@alexcroox Leia isto: https://github.com/Microsoft/vscode/issues/67576

Eu praticamente desisti do VS Code. É muito difícil para mim ver os arquivos. E como tenho uma assinatura do Visual Studio, é muito fácil usar o VS 2017. Depois de configurá-lo, é muito melhor que o Code.

Ah, obrigado, @sguilla - poder alterar o tamanho do recuo corrige a maioria dos problemas para mim!

Comecei a usar o VS Code há algumas semanas e, como todo mundo, acho muito difícil dizer rapidamente em quais diretórios certos arquivos estão.

Acabei de definir a opção Tree Indent para o máximo de 20, mas idealmente eu gostaria de defini-la ainda mais.

Ainda é muito difícil navegar pelas pastas sem linhas de recuo da árvore de diretórios, como recomenda a postagem original.

Vejo que esta edição é de 2016; já se passaram 3 anos, por favor, adicione algumas linhas de árvores.

Isso é meio que um problema e talvez eu precise voltar para outro editor nesse meio tempo.

Para todos que ainda não o fizeram, por favor "curtem" o comentário inicial .
Para questões em aberto, classificadas por polegares para cima ( is:issue is:open sort:reactions-+1-desc ), estamos atualmente apenas em 18º lugar!
Obrigado.

Aumentei o espaçamento do recuo da árvore para 20px, mas por algum motivo, quando eu "recarrego" o VS Code e/ou fecho e reabro, o espaçamento reverte para o espaçamento original de 8px. Você pode ver visualmente o salto de espaçamento da minha configuração de 20px de volta para 8px.

Eu também estou usando o tema Material Icon. Quando desabilito o tema, o problema ainda persiste.

Apenas imaginando se alguém poderia criar uma extensão do VS Code para isso. Infelizmente, não tenho experiência na criação de extensões do VS Code (...ainda)

Meus mais recentes insiders agora têm 40px no máximo. Ainda falta a árvore em si difícil 🤷‍♂️

Apenas imaginando se alguém poderia criar uma extensão do VS Code para isso. Infelizmente, não tenho experiência na criação de extensões do VS Code (...ainda)

Existe uma extensão CSS personalizada, conforme descrito nos comentários acima. Mas isso é banido pela MicroSoft, você receberá um aviso [não suportado] na barra de título e ele parará de funcionar toda vez que o código VS for atualizado. Aguardando uma solução oficial.

+1

isso parece muito mais legível do que o padrão:

Para corrigir [Unsupported] quando você modificou os estilos originais, use https://github.com/lehni/vscode-fix-checksums

_ [Unsupported] aviso é exibido quando os arquivos principais são modificados (e sua soma de verificação difere do original)._

Esse recurso é tão importante que deve ser suportado oficialmente, não apenas algum hackaround que precisa ser reconfigurado a cada atualização.

É engraçado, eu tentei usar o VSCode alguns anos atrás e fiquei realmente impressionado, mas mesmo assim o recuo e o estilo da barra lateral afetaram muito a legibilidade e eu o troquei por outro IDE. Voltando a isso agora (ainda é bom!) Estou extremamente surpreso que isso ainda seja um problema e claramente não estou sozinho nisso. Os guias de recuo da árvore realmente melhorariam a legibilidade: por favor, suporte esta personalização oficialmente!

Obrigado por esta solicitação de recurso. Achei que eu era o único.

Para mim, a pior parte é que as setas não estão alinhadas com outros elementos no mesmo nível:

Este recurso está atualmente em # 12 (quando solicitado por polegar para cima)

Isso aqui há 2 anos...

+1, por favor, corrija isso, definindo o Workbench > Tree: Indent para 19 me ajudou, mas cara! falar sobre se perder em uma árvore enorme, pode funcionar bem no padrão com 1 pasta, mas ... Você notará até que no VS2017 eles adicionaram as linhas de árvore às instruções if para que você possa descobrir onde está no nível de {} recuos. onde está o ícone de dor de cabeça!

Também um problema para mim! Eu preciso de linhas para me concentrar melhor na escrita de código; não luta para encontrar os arquivos certos toda vez

Encontrei outro tópico onde eles mostraram que isso foi resolvido (ajustando tree.indent em Configurações)
https://github.com/Microsoft/vscode/issues/35447#issuecomment -455461013

@divinentd A solução a que você está se referindo não é exatamente a mesma coisa. Esse recurso ainda está aberto e está relacionado a ter linhas de árvore para que você possa discernir o nível de aninhamento dentro da estrutura de pastas do seu projeto. O nível de recuo no outro segmento é útil para dar aos seus olhos alguma separação visual, mas não é o mesmo que ter guias de recuo visual que você pode obter com linhas de árvore.

Soluções temporárias

Embora eu não ache que esta seja uma solução perfeita, se você tende a ter dificuldade em ver visualmente a localização de um arquivo para navegar em seu projeto, então você pode adicionar o recurso breadcrumbs ao topo do seu editor. Você pode clicar em qualquer nível para ver outros arquivos nesse nível aninhado e navegar de acordo.

Outra maneira é, se você souber o nome do arquivo que deseja abrir, pressione rapidamente F1 e, em seguida, exclua no teclado, o que exibirá a visualização de arquivos na paleta de comandos e comece a digitar o nome do arquivo. Com facilidade, essa também é uma pesquisa de conteúdo em vez de começar com. Isso permite que você veja os arquivos disponíveis e a pasta em que eles estão. Você pode definir o window.zoomLevel em seu arquivo settings.json para tornar as coisas do tamanho ideal para sua eficiência.

Ideia Adicional para a Implementação

Como ideia de extensão para a implementação, prevejo diferentes linhas coloridas configuráveis ​​para diferentes níveis de recuo. Por exemplo, você pode configurar os níveis de recuo usando as cores do arco-íris em seu arquivo settings.json. Claro, seria ótimo se a cor da linha, o estilo e a espessura fossem opções configuráveis.

• Vermelho - Nível 1
  -- Laranja - Nível 2
  --- Amarelo - Nível 3
  ---- Verde - Nível 4
  ----- Azul - Nível 5
  ------ Índigo - Nível 6
  ------- Violeta - Nível 7

Eu também adoraria ver esse recurso chegar em breve ao VS Code e adoraria a direção que o projeto está tomando. Bom trabalho, pessoal!

Pergunte e você será ignorado

Ainda estamos em 12º lugar, para questões em aberto classificadas por 👍 (polegar para cima), mas estamos preenchendo a lacuna rapidamente.

# | Questão aberta | :+1: | :-1: | :coração:
-- | ---------- | ---- | ---- | -------
1 | Permitir janelas flutuantes | 2909 | 40 | 416
2 | Abas para terminal integrado | 1293 | 16 | 128
3 | vscode.extensions não atualiza ao instalar/remover/desativar extensões sem reiniciar | 922 | 0 | 47
4 | Permitir alterar o tamanho da fonte e a fonte do workbench | 917 | 1 | 123
5 | Atualizando o ícone do produto VS Code | 825 | 18 | 303
6 | Git: Use VS Code como editor de mesclagem | 669 | 0 | 105
7 | Suporte para abrir uma pasta de projeto em várias janelas do VS Code | 630 | 0 | 72
8 | Recuo Automático / Formatação de Código / Embelezar | 589 | 0 | 45
9 | Gravação de macros | 586 | 0 | 73
10 | Adicionar opção para fixar guias semelhantes ao Visual Studio | 553 | 0 | 73
11 | Permitir personalização de atalhos do mouse | 521 | 0 | 57
12 | 👉 Guias de recuo da árvore de diretórios no Explorador de Arquivos 👈 | 503 | 0 | 84
13 | Fornecer suporte para sincronizar configurações entre máquinas | 429 | 0 | 62
14 | Exibir resultados de pesquisa em uma guia em vez da barra lateral | 423 | 0 | 73

Para quem ainda não o fez, por favor 👍 (polegar para cima) o comentário inicial .

Desejo que os spammers com +1 possam assediar o github para permitir o cancelamento da inscrição apenas de comentários, da mesma forma que você está fazendo aqui :smile:

Você viu esta postagem? https://simonholman.blog/visual-studio-code-finally-has-a-tree-indent-setting/
Parece que "Guias de recuo da árvore de diretórios no Explorador de arquivos" está funcionando agora.
Nas configurações, procure por "recuo de árvore"
configuração > bancada > recuo da árvore.

@RoelandJimenez Sim, discutimos isso acima. Não é o mesmo que ter linhas, mas um passo na direção certa.

Esse recurso deve ter todos os programas com um explorador de arquivos!

Qualquer atualização?

@Ninroot Não incomode os desenvolvedores assim. Recebemos atualizações quando ocorre uma discussão ou quando o status do ticket muda.

por favor, adicione este recurso!!!!!!!!!!

+1

Pessoas, pelo amor de Deus, parem de enviar spam para este ticket. A equipe do VS Code sabe sobre essa solicitação.
Se você quiser dizer "+1" , basta votar e escolher sua reação (emoji mão para cima). É assim que funciona neste repositório

+1

@kanlukasz Github adicionou recentemente um novo recurso. Podemos assinar apenas para mudanças importantes e não para +1 me too pls fix !!!!! 🎉🎉🎉🎉🎉🎉🎉🎉🎉

Caros spammers +1 , você não me terá novamente.

Instruções passo a passo (para macOS)

1. Instale https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css e reinicie o VS Code
2. Salve o conteúdo desta essência em algum arquivo, no meu exemplo é /Users/semenov/.vscode/css/tree.css
3. Abra Preferências > Configurações e adicione esta configuração:

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

1. Cmd-P, "> Ativar CSS e JS personalizados", reinicie o VS Code
2. Ignorar a mensagem "Seu código VS está corrompido"

Após atualizar o VS Code, repita as etapas 4 e 5.

Bem, não parece fazer efeito.

Isso está atualmente no Plano de Iteração de junho de 2019 nº 75103 como "Adicionar suporte para guias de recuo em árvores".

Isso foi enviado para master: https://github.com/microsoft/vscode/commit/036278c3ed0ef39274fa68e11e472fbd05f3e9d0 Será lançado amanhã no Insiders! :fogos de artifício:

Ele vem com uma nova configuração workbench.tree.renderIndentGuides com as seguintes opções:

• none , apenas não renderize nada
• onHover , renderiza guias não interessantes apenas ao passar o mouse. Sempre renderize guias interessantes (nós de árvore selecionados e focados).
• always , renderiza todos os guias o tempo todo: interessantes e não interessantes.

Lembre-se de dar uma olhada esta semana e fornecer feedback! Novamente: deve sair no Insiders de amanhã.

Existe alguma maneira de estilizá-lo como no primeiro post, como na linha apontando para arquivos/pastas?
Além disso, a capacidade de alterar o estilo da linha também: pontilhada, sólida, ...?

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

Existe alguma maneira de estilizá-lo como no primeiro post, como na linha apontando para arquivos/pastas?
Além disso, a capacidade de alterar o estilo da linha também: pontilhada, sólida, ...?

Por enquanto não, não. Estamos tentando atingir os dois lados: enfrentar o desafio da percepção da hierarquia, mantendo um estilo visual consistente e leve. Vamos ver como isso vai.

@joaomoreno parece legal, mas seria ótimo se esses guias fossem um pouco mais visíveis

Agora eu mal posso vê-lo

Agora eu mal posso vê-lo

Deve haver uma opção para deixá-los como estão agora.

@joaomoreno Deve haver configurações em workbench.colorCustomizations como os guias de recuo do editor, o que permitiria algumas das personalizações que as pessoas estão pedindo.

@KamasamaK :

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

Então .. não haverá linhas horizontais para os arquivos? Está meio distante dos arquivos. Mover a linha horizontal um pouco para a direita também seria muito útil para torná-la mais visível/clara. (Estou grato pelas linhas de qualquer maneira, mas seria bom ter)

Eu adoraria uma opção entre "none" e "onHover" que sempre mostra os guias interessantes, mas não mostra os não interessantes no hover.

Também seria legal passar o mouse para ter todas as pastas pai do arquivo pairado destacadas

Se você deseja obter uma alternativa decente para isso hoje :

"workbench.tree.indent": 32

Ajuste conforme necessário.