Estoy de acuerdo con ésto. Especialmente encuentro que la sangría es difícil de interpretar. Y es aún peor cuando los íconos de archivos están habilitados en el explorador.

¡Yo tambien estoy de acuerdo! +1

Otra cosa que sería buena en ese sentido es personalizar la distancia de sangría del siguiente nivel de jerarquía.
Si bien también me encantaría algunas pautas, creo que tener, por ejemplo, el doble de distancia y, por lo tanto, tener una separación más clara ya ayudaría mucho.

@ Aides359 Estoy de acuerdo. Los ojos de todos son diferentes. Basta con mirar las pestañas. A algunas personas les gustan 2 tabulaciones de espacio en su código. A unos les gustan 8. A otros 4.

Soy un poco disléxico, así que realmente me cuesta mucho la sangría en VS Code,

Aunque parece que ha mejorado un poco. Pero sigue siendo malo en la pantalla de mi computadora portátil, por ejemplo, mientras que en mis monitores grandes en el trabajo, está más marcadamente sangrado.

¡Sí! Por favor, líneas de árboles como una opción. Sería especialmente útil cuando el editor está abierto en una esquina lejana en un monitor grande.

Atar la palanca al mouse-over en Explorer Pane ayudaría a mantener una apariencia limpia.

Realmente útil en grandes proyectos.
¿Algún avance en esto? ¿O dónde podría comenzar a buscar en la fuente?

@edmundo096 esto se cerró como un dup de #21295, que también está cerrado. Así que supongo que esto no va a ninguna parte.

@cosmoKenney Este problema no está cerrado...

@cosmoKenney , no, esta es la publicación original y no está resuelta. #21295 fue el duplicado.
Todavía no pude encontrar una configuración para habilitar estas guías de sangría en el Explorador de la barra lateral.

Así que sí... mis ojos están sangrando. Soy como what is index.js of Expression folder... I know you're there! .

Creo que debería tener una prioridad bastante alta. Las aplicaciones web modernas a menudo tienen una estructura de archivos anidados profundos. ver este ejemplo

y aquí está el aspecto aproximado sin Lupa. no tan mal... si tienes la visión de un piloto de combate

También me gustaría esto, es bastante fácil perderse en proyectos más grandes.

También estoy de acuerdo en que esto debe tenerse en cuenta, incluso cuando comienzas un proyecto pequeño y conoces todos los archivos de memoria, es un poco molesto encontrarlos cuando quieres usar el explorador, y no el "Abridor rápido de archivos"...

¡Estoy de acuerdo! He estado tratando de buscar una configuración o extensión que haga esto durante los últimos dos días, pero nada T_T. Realmente me cuesta navegar usando el explorador (muy útil cuando estás navegando por un nuevo proyecto).

¡Las líneas de sangría serían increíbles!

¿Tenemos alguna indicación de si esto está en la hoja de ruta?

+1

+1 esto es un dolor enorme para mí en mi monitor grande.

++1

+1, una razón por la que podría volver a Atom

+1

+1Microsoft por favor!

+1 por esto.

Mientras tanto, he encontrado un pequeño truco para resolverlo por ahora:

Encuentre su instalación de VSCode (la mía era C:/Program Files/Microsoft VS Code ) y vaya a resources/app/out/vs/workbench y abra workbench.main.css .

Agregue estas líneas al final del archivo:

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

¡Hecho!

Ese código sangra cada nivel 20px más, comenzando desde 0px (el !important anula los valores predeterminados), pero, por supuesto, puede cambiar eso de 20px a tanto como desee, solo cambie los valores. También he ido solo a 15 niveles de profundidad, que también puede expandir, pero si su proyecto tiene más de 15 niveles, le sugiero que vuelva a evaluar su estructura de directorios. ;)

@jakewtaylor esto funcionó muy bien para mí, el único problema es que recibirá una notificación de 'instalación dañada' después de hacer los cambios (... más información aquí ).

@jakewtaylor @swordf1zh , ¿podría proporcionar una captura de pantalla con este 'truco'?

Inspirándome en tu idea, he creado 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á lejos de ser una guía de sangría sólida, pero es un paso adelante:

@swordf1zh sí, también lo tengo, pero solo una vez. No lo he visto desde entonces.

@ pie6k eso se ve bien. Su adición me ha dado una idea para mejorarlo ligeramente, lo intentaré cuando esté en la oficina más tarde.

@pie6k Su truco sería una solución temporal perfecta, excepto que no me ha funcionado tan bien por alguna razón T_T (vea la imagen a continuación)

@jakewtaylor No puedo esperar 😄

Tengo algo que funciona bastante bien. Como dijiste, lejos de ser perfecto, pero hace que el árbol de archivos se vea mucho mejor, en mi opinión.

He puesto las instrucciones en este Gist ya que el CSS es mucho más largo ahora.

Se ve como esto:

¡Espero que funcione para ti!

Eso está funcionando muy bien.
Gracias.

Salvaste mis ojos y mi mente.

Buena mejora. Cambié el alfa de 0.4 a 0.1 y se ve muy bien, pero es solo una preferencia personal. Si puede hacer una extensión de esto, sería uno de los mejores 25 con seguridad:

Creo que lo haré, tendré que investigarlo. 😃

Actualización: Parece que editar la interfaz de usuario con extensiones no es posible por el momento, solo tendrá que usar las instrucciones de Gist.

@Winston-Guess olvidó decirte que necesitas position: relative en .monaco-tree .monaco-tree-rows>.monaco-tree-row .

@jakewtaylor @swordf1zh - se ve increíble 🎉 🕺! jaja por fin!

Oh mi Dios maldito. He buscado este 4 días ahora. Me tomó un tiempo entender que el nombre de la barra lateral no es Mónaco. Implemente esto con diferentes variaciones.
Este 'estilo sin líneas' realmente me está volviendo loco al no ver líneas ni nada que guíe mis ojos.
+1 En todos los que hicieron una solución a esto.

Dios mío, esto es lo mejor. ¿A dónde envío una donación?

@edenprojectde ¿Qué quiere decir con "el nombre de la barra lateral no es Moncao"? ¿Tiene diferentes nombres de clase en su instalación? Puedo poner fácilmente algunas notas en Gist para ayudar a las personas en el futuro.

@jakewtaylor No, solo quiero decir que todos los Css que busqué en la interfaz gráfica de usuario tenían el nombre monaco, pero no indicaban "barra lateral". Acabo de cambiar a VS Code, así que no sabía/no sabía cómo funciona la configuración de la interfaz gráfica de usuario, no es obvio, ya que estaba en Atom.

Solo para entender el punto:


No hay indicación de la barra lateral de nombre en estos nombres de clase.

Supongo que es porque es parte del marco, nada de lo que VS Code debería preocuparse, es más bien mi falta de comprensión de la GUI en sí.

Ya veo, solo me salió usando el inspector 😛

Instrucciones paso a paso (para macOS)

1. Instale https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css y reinicie VS Code
2. Guarde el contenido de esta esencia en algún archivo, en mi ejemplo es /Users/semenov/.vscode/css/tree.css
3. Abra Preferencias > Configuración y agregue esta configuración:

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

1. Cmd-P, ">Habilitar CSS y JS personalizados", reinicie VS Code
2. Descartar el mensaje "Tu código VS está dañado"

Después de actualizar VS Code, repita los pasos 4 y 5.

@IlyaSemenov, por alguna razón, su método no funciona para mí en las versiones normal e interna. Vi en las instrucciones de la extensión que el paso 4 requiere privilegios de administrador pero eso tampoco me ayudó 😕

La extensión y el CSS personalizado parecen funcionar para mí, pero los colores de las líneas están orientados hacia los temas más oscuros. Vea la captura de pantalla...

...sugerencias?

@cosmoKenney Sí, solo cambia el CSS en esencia .

El color actual es rgba(255, 255, 255, 0.4) , que es blanco con una opacidad del 40 %. Cambie todas las apariciones al color que desee.

rgba(0, 0, 0, 0.4) podría funcionar bien para fondos claros (negro al 40 % de opacidad)

@jakewtaylor :
Gracias jake Funciona bien.
Ahora solo tengo que descubrir cómo aligerar las guías de sangría vertical en el panel de origen. ;-)

+1 👍

@IlyaSemenov gracias por el truco 👍

Por cierto, ¿alguien sabe una solución para aumentar el espacio vertical entre los elementos de la lista?

Esto es muy útil, así que me pregunto por qué nadie ha hecho nunca una extensión. Sería mi favorito.

Vamos, Microsoft, ya lo habías descubierto en el 95.

Esto definitivamente debe ser una opción incorporada pronto. Por favor :)

Ampliando las ideas de @chentel y @swordf1zh

Atar la palanca al mouse-over en Explorer Pane ayudaría a mantener una apariencia limpia.

Cambié el alfa de 0.4 a 0.1 y se ve genial

He bifurcado la esencia de @jakewtaylor para que sea más fácil de navegar. => https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

• El último elemento del árbol obtiene la línea inferior eliminada
• Las carpetas y los archivos se distinguen por el ancho de línea
• Las líneas son casi transparentes normalmente, pero aumentan en opacidad al pasar el mouse por encima

antes vs despues

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

Eso es lo que estoy buscando.

+1
¿Algún plan para implementar esta función tan necesaria?

En mi opinión, esto debería ser predeterminado y con una opción incorporada para desactivarlo 😬

@miguelkashir Estoy de acuerdo, y creo que la cantidad de respuestas a este hilo habla mucho de la necesidad de esto como una función integrada.

Estar de acuerdo. Si bien aprecio los esfuerzos de las personas que han proporcionado soluciones alternativas de CSS, esto debería estar en el producto. El Explorador se vuelve extremadamente difícil de usar en un proyecto grande con monitores grandes como lo es en este momento. Vamos, Microsoft, ¡arréglalo!

Subiendo como una solicitud deseada

+1

Si alguien no ve ningún cambio después de crear un archivo CSS personalizado y hacer referencia a él en "vscode_custom_css.imports" , puede hacer que funcione mucho más simple y sin instalar vscode-custom-css ; simplemente agregue el CSS al final del workbench.main.css y listo!

@Funghorn Exactamente como en mi esencia 😛

@jakewtaylor sí, pero pensé que algunas personas usarían la versión "parcheada" de @samdenty99 y el archivo CSS personalizado no funciona para todos ¯_(ツ)_/¯

+1

+1

Chicos, por favor dejen de comentar +1. Es molesto para las personas suscritas que esperan soluciones, solo 👍 reacciona a la publicación inicial. 😋

¿Hay una opción para esto en la compilación Code - Insiders? La nueva configuración se mencionó aquí "Proporcionar GUI para la configuración # 3355", por eso pregunto

@fillipvt El problema que ha vinculado se refiere a una GUI para la configuración, este problema se trata de la apariencia del explorador de archivos. No creo que estén relacionados? (a menos que me perdí algo...?)

Algunos gerentes de nivel 4 en Microsoft:
"Elimina las líneas, se ve mucho más genial hagas lo que hagas todo el día sin esas líneas feas".

+1

+1
2 subdirectorios y ya siento el dolor

Sí, el explorador es un desastre en este momento con algo más que 1 capa de carpetas. ¿Alguien ha hecho un PR con alguna de las propuestas aquí? Vi algunos exploradores modificados realmente geniales en este hilo

+1

¡Por favor, necesitamos más control en esta área del editor! ¡Gracias! (Sin la solución hacky)

+1

@samdenty No puedo acceder a tu esencia. ¿Se ha movido o eliminado?

Hice una bifurcación de la esencia de @jakewtaylor . Se ve igual que el de samdenty.
https://gist.github.com/thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c

Para mí cambié el nivel a 10.

También hay un pequeño problema que no sé cómo solucionarlo. No sé si samdenty tuvo el mismo problema. Su esencia ya no existe.

@thepixture Lamentablemente , ese problema es un efecto secundario de la forma en que funciona: simplemente repite la línea vertical varias veces. Opinión personal aquí, pero em es más seguro que px (mi local ha sido cambiado ;-)).

@designbyadrian cambió mi nombre de usuario, enlace actualizado https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

+1

En v1.31, se introdujo un nuevo widget de árbol. ¿Sería más fácil renderizar guías de sangría con ese nuevo widget? @isidorn

Para cualquiera que use la extensión CSS personalizada, la arreglé para que funcione con la nueva actualización de enero de 2019
Hubo 3 correcciones principales que agregué,

1. La clase de fila de árbol se actualizó de monaco-tree-row a monaco-list-row
2. En el archivo css personalizado, línea 21, monica-tree-row tenía una regla position: relative , lo que provocaba problemas de espaciado vertical
3. El div .monaco-tl-twistie tenía una regla de margin-left: 40px en línea, que tuve que anular (línea 15)

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

Editar: utilicé la esencia de @ samdenty como base, pero es posible que deba modificarla para que se vea 'bien'

Edición 2: solucioné un problema con las líneas que desaparecían al pasar el mouse o seleccionar una carpeta de más de 3 de profundidad

Edición 3: si juegas con esto , puedes comentar la regla monaco-tl-twistie (líneas 15-17). No sabía que existía esa configuración cuando arreglé el css (y con las guías de sangría, prefiero una sangría más estrecha que establecerla en 0)

Gracias @Lightfire228

Dejó de funcionar con la nueva actualización. Además, ahora hay una molesta advertencia [no admitida] en la barra de título. Esperando a que MS actualice el explorador.

+1

Me estoy haciendo eco de los mismos sentimientos que todos los demás; la sangría de la estructura de árbol es demasiado pequeña para delinear subestructuras de manera efectiva.

Danos algunas opciones para cambiar esto.

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

Entonces, esto es parte de la configuración de vscode ahora, pero ¿por qué está limitado a un máximo de 20?

Vengo de Sublime y estoy acostumbrado a una sangría mucho más profunda, ¿hay alguna buena razón para no permitir una sangría más profunda?

vscode max 20 Tree Indent left frente a sublime text 3 right

@alexcroox Lea esto: https://github.com/Microsoft/vscode/issues/67576

Prácticamente me he dado por vencido con VS Code. Es demasiado difícil para mí ver los archivos. Y dado que tengo una suscripción de Visual Studio, es bastante sencillo usar VS 2017. Una vez que lo configura, es mucho mejor que Code.

Ah, gracias, @sguilla : ¡poder cambiar el tamaño de la sangría soluciona la mayoría de los problemas para mí!

Empecé a usar VS Code hace unas semanas y, como todos los demás, encuentro que es muy difícil saber rápidamente en qué directorios se encuentran ciertos archivos.

Acabo de configurar la opción Sangría del árbol al máximo de 20, pero lo ideal sería configurarla aún más.

Todavía es demasiado difícil navegar por las carpetas sin líneas de sangría del árbol de directorios como recomienda la publicación original.

Veo que este problema es de 2016; han pasado 3 años, agregue algunas líneas de árboles.

Esto es una especie de factor decisivo y es posible que tenga que volver a cambiar a otro editor mientras tanto.

Para todos los que no lo han hecho, por favor, "pulgar hacia arriba" en el comentario inicial.
En cuanto a las cuestiones abiertas, ordenadas por me gusta ( is:issue is:open sort:reactions-+1-desc ), ¡actualmente solo ocupamos el puesto 18!
Gracias.

Aumenté el espaciado de la sangría del árbol a 20 px, pero por alguna razón cuando "recargo" el código VS y/o lo cierro y lo vuelvo a abrir, el espaciado vuelve al espaciado original de 8 px. Puede ver visualmente el salto de espaciado de mi configuración de 20 px a 8 px.

Yo también estoy usando el tema del icono de material. Cuando desactivo el tema, el problema persiste.

Solo me preguntaba si alguien podría crear una extensión de VS Code para esto. Lamentablemente, no tengo experiencia en la creación de extensiones de VS Code (... todavía)

Mi información privilegiada más reciente ahora tiene un máximo de 40 px. Todavía me falta el árbol en sí, difícil 🤷‍♂️

Solo me preguntaba si alguien podría crear una extensión de VS Code para esto. Lamentablemente, no tengo experiencia en la creación de extensiones de VS Code (... todavía)

Hay una extensión CSS personalizada, como se describe en los comentarios anteriores. Pero esto está prohibido por MicroSoft, recibirá una advertencia [no compatible] en la barra de título y dejará de funcionar cada vez que se actualice el código VS. A la espera de una solución oficial.

+1

esto parece mucho más legible que por defecto:

Para corregir [Unsupported] cuando modificó los estilos originales, use https://github.com/lehni/vscode-fix-checksums

_ Se muestra una advertencia [Unsupported] cuando se modifican los archivos principales (y su suma de verificación difiere de la original)._

Esta característica es tan importante que debe ser compatible oficialmente, no solo un truco que debe reconfigurarse en cada actualización.

Es divertido, intenté usar VSCode hace unos años y quedé realmente impresionado, pero incluso entonces la sangría y el estilo de la barra lateral afectaron demasiado la legibilidad y lo descarté por otro IDE. Volviendo a eso ahora (¡todavía es bueno!) Estoy extremadamente sorprendido de que esto siga siendo un problema y claramente no estoy solo en esto. Las guías de sangría de árbol realmente mejorarían la legibilidad: ¡apoye esta personalización oficialmente!

Gracias por esta solicitud de función. Pensé que era el único.

Para mí lo peor es que las flechas no están alineadas con otros elementos al mismo nivel:

Esta característica se encuentra actualmente en el n. ° 12 (cuando se ordena con el pulgar hacia arriba)

Esto ha estado aquí por 2 años...

+1, solucione esto, configurar Workbench> Tree: Indent en 19 me ha ayudado, ¡pero hombre! hablando de perderse en un árbol enorme, podría funcionar bien por defecto con 1 carpeta pero... Incluso notará que en VS2017 agregaron las líneas de árbol a las declaraciones if para que pueda averiguar dónde se encuentra en el nivel de {} sangrías. ¿Dónde está el icono de dolor de cabeza?

También un problema para mí! Necesito líneas para concentrarme mejor en escribir código; no tenga problemas para encontrar los archivos correctos cada vez

Encontré otro hilo donde mostraron que esto se ha solucionado (al ajustar tree.indent en Configuración)
https://github.com/Microsoft/vscode/issues/35447#issuecomment-455461013

@divinentd La solución a la que te refieres no es exactamente lo mismo. Esta característica aún está abierta y se relaciona con tener líneas de árbol para que pueda discernir el nivel de anidamiento dentro de la estructura de carpetas de su proyecto. El nivel de sangría en el otro subproceso es útil para dar a sus ojos cierta separación visual, pero en realidad no es lo mismo que tener guías de sangría visuales que puede obtener con líneas de árboles.

Soluciones temporales

Aunque no creo que esta sea una solución perfecta, si tiende a tener dificultades para ver visualmente la ubicación de un archivo para navegar dentro de su proyecto, puede agregar la función de migas de pan en la parte superior de su editor. Luego puede hacer clic en cualquier nivel para ver otros archivos dentro de ese nivel anidado y navegar en consecuencia.

Otra forma es si sabe el nombre del archivo que le gustaría abrir, presione rápidamente F1 y luego elimine en su teclado, lo que abre la vista de archivos en su paleta de comandos y luego comience a escribir el nombre del archivo. Convenientemente, esta también es una búsqueda de contenido en lugar de un comienzo con. Esto le permite ver los archivos disponibles y la carpeta en la que se encuentran. Puede configurar window.zoomLevel en su archivo settings.json para que las cosas tengan el tamaño óptimo para su eficiencia.

Idea adicional para la implementación

Como idea de extensión para la implementación, preveo diferentes líneas de colores configurables para diferentes niveles de sangría. Por ejemplo, puede configurar los niveles de sangría usando los colores del arcoíris dentro de su archivo settings.json. Por supuesto, sería genial si el color, el estilo y el grosor de la línea fueran opciones configurables.

• Rojo - Nivel 1
  -- Naranja - Nivel 2
  --- Amarillo - Nivel 3
  ---- Verde - Nivel 4
  ----- Azul - Nivel 5
  ------ Índigo - Nivel 6
  ------- Violeta - Nivel 7

A mí también me encantaría ver que esta característica llegue pronto a VS Code y me encantaría la dirección en la que se está moviendo el proyecto. ¡Buen trabajo, muchachos!

Pregunta y serás ignorado

Todavía estamos en el puesto 12, para problemas abiertos ordenados por 👍 (pulgar hacia arriba), pero estamos cerrando la brecha rápidamente.

# | Problema abierto | :+1: | :-1: | :corazón:
-- | ---------- | ---- | ---- | -------
1 | Permitir ventanas flotantes | 2909 | 40 | 416
2 | Pestañas para terminal integrado | 1293 | 16 | 128
3 | vscode.extensions no se actualiza al instalar/eliminar/deshabilitar extensiones sin reiniciar | 922 | 0 | 47
4 | Permitir cambiar el tamaño de fuente y la fuente del banco de trabajo | 917 | 1 | 123
5 | Actualizar el icono del producto VS Code | 825 | 18 | 303
6 | Git: use VS Code como editor de combinación | 669 | 0 | 105
7 | Soporte para abrir una carpeta de proyecto en múltiples ventanas de VS Code | 630 | 0 | 72
8 | Sangría automática / Formateo de código / Embellecer | 589 | 0 | 45
9 | Grabación de macros | 586 | 0 | 73
10 | Agregar opción para anclar pestañas similar a Visual Studio | 553 | 0 | 73
11 | Permitir la personalización de los accesos directos del mouse | 521 | 0 | 57
12 | 👉 Guías de sangría del árbol de directorios en el Explorador de archivos 👈 | 503 | 0 | 84
13 | Proporcione soporte para sincronizar configuraciones entre máquinas | 429 | 0 | 62
14 | Mostrar resultados de búsqueda en una pestaña en lugar de la barra lateral | 423 | 0 | 73

Para cualquiera que no lo haya hecho, por favor 👍 (pulgar hacia arriba) el comentario inicial.

Desearía que los spammers +1 pudieran acosar a github para permitir la cancelación de la suscripción solo de los comentarios, de la misma manera que lo está haciendo aquí :smile:

¿Viste esta publicación? https://simonholman.blog/visual-studio-code-finally-has-a-tree-indent-setting/
Parece que las "Guías de sangría del árbol de directorios en el Explorador de archivos" están funcionando ahora.
En la configuración, busque "sangría de árbol"
configuración> banco de trabajo> sangría de árbol.

@RoelandJimenez Sí, lo discutimos arriba. No es lo mismo tener líneas, sino un paso en la dirección correcta.

¡Esta característica debería tener todos los programas con un explorador de archivos!

¿Cualquier actualización?

@Ninroot No molestes a los desarrolladores de esta manera. Recibimos actualizaciones cuando ocurre una discusión o cuando cambia el estado del ticket.

por favor agregue esta característica !!!!!!!!!!!

+1

Gente, por el amor de Dios, dejen de enviar spam a este boleto. El equipo de VS Code conoce esta solicitud.
Si quieres decir "+1", simplemente vota y elige tu reacción (emoji mano arriba). Así es como funciona en este repositorio.

+1

@kanlukasz Github agregó recientemente una nueva función. ¡Podemos suscribirnos solo para cambios importantes y no para +1 me too pls fix !!!!! 🎉🎉🎉🎉🎉🎉🎉🎉🎉

Estimados +1 spammers, no me tendrán de nuevo.

Instrucciones paso a paso (para macOS)

1. Instale https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css y reinicie VS Code
2. Guarde el contenido de esta esencia en algún archivo, en mi ejemplo es /Users/semenov/.vscode/css/tree.css
3. Abra Preferencias > Configuración y agregue esta configuración:

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

1. Cmd-P, ">Habilitar CSS y JS personalizados", reinicie VS Code
2. Descartar el mensaje "Tu código VS está dañado"

Después de actualizar VS Code, repita los pasos 4 y 5.

Bueno, no parece hacer efecto.

Esto se encuentra actualmente en el Plan de iteración de junio de 2019 #75103 como "Agregar soporte para guías de sangría en árboles".

Esto ha sido empujado a dominar: https://github.com/microsoft/vscode/commit/036278c3ed0ef39274fa68e11e472fbd05f3e9d0 ¡Saldrá mañana en Insiders! :fuegos artificiales:

Viene con una nueva configuración workbench.tree.renderIndentGuides con las siguientes opciones:

• none , simplemente no renderices nada
• onHover , renderiza guías no interesantes solo al pasar el mouse. Siempre represente guías interesantes (nodos de árbol seleccionados y enfocados).
• always , muestra todas las guías todo el tiempo: tanto interesantes como no interesantes.

¡Recuerde darle una vuelta esta semana y dar su opinión! De nuevo: debería salir mañana en Insiders.

¿Hay alguna forma de diseñarlo como en la primera publicación, como en la línea que apunta a archivos/carpetas?
Además, la capacidad de cambiar el estilo de línea también: punteado, sólido, ...?

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

¿Hay alguna forma de diseñarlo como en la primera publicación, como en la línea que apunta a archivos/carpetas?
Además, la capacidad de cambiar el estilo de línea también: punteado, sólido, ...?

No por ahora, no. Estamos tratando de cumplir con ambos extremos: abordar el desafío de la percepción de la jerarquía mientras mantenemos un estilo visual consistente y liviano. Veremos cómo va eso.

@joaomoreno se ve genial, pero sería genial si esas guías fueran un poco más visibles

Ahora mismo apenas puedo verlo

Ahora mismo apenas puedo verlo

Debería haber una opción para dejarlos como están ahora.

@joaomoreno Debe haber configuraciones por debajo workbench.colorCustomizations como tienen las guías de sangría del editor, lo que permitiría algunas de las personalizaciones que la gente solicita.

@KamasamaK :

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

Entonces... ¿no habrá líneas horizontales en los archivos? Es un poco distante de los archivos. Mover la línea horizontal un poco hacia la derecha también sería muy útil para que sea más visible/clara. (Estoy agradecido por las líneas de cualquier manera, pero sería bueno tenerlas)

Me encantaría una opción entre "ninguno" y "onHover" que siempre muestre las guías interesantes, pero no muestre las que no son interesantes al pasar el mouse.

También sería genial al pasar el mouse sobre todas las carpetas principales del archivo sobrevolado resaltadas

Si desea obtener una alternativa decente para esto hoy :

"banco de trabajo.árbol.indent": 32

Ajuste según sea necesario.