Vscode: Guides de retrait de l'arborescence de répertoires dans l'explorateur de fichiers

Créé le 23 déc. 2016  ·  124Commentaires  ·  Source: microsoft/vscode

Il est difficile de naviguer dans un projet avec une structure de répertoires complexe.

Mieux vaut regarder quelque chose comme ça:

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

Au lieu de cela:

    main.js
  src
    main.ts
    tsconfig.json
  package.json
feature-request file-explorer on-testplan

Commentaire le plus utile

image

Alors oui... mes yeux saignent. Je suis genre what is index.js of Expression folder... I know you're there! .

Je pense que cela devrait avoir une priorité assez élevée. Les applications Web modernes ont assez souvent une structure de fichiers imbriqués profonds. voir cet exemple

Tous les 124 commentaires

Je suis d'accord avec ça. Je trouve surtout que l'indentation est difficile à interpréter. Et c'est encore pire lorsque les icônes de fichiers sont activées dans l'explorateur.

je suis aussi d'accord ! +1

Une autre chose qui serait bien à cet égard est de personnaliser la distance d'indentation du niveau suivant de la hiérarchie.
Bien que j'aimerais aussi quelques lignes directrices, je pense qu'avoir deux fois la distance et donc avoir une séparation plus claire aiderait déjà beaucoup.

@Aides359 Je suis d'accord. Les yeux de chacun sont différents. Regardez simplement les onglets. Certaines personnes aiment 2 onglets d'espace dans leur code. Certains aiment 8. D'autres 4.

Je suis un peu dyslexique, donc j'ai vraiment du mal avec l'indentation dans VS Code,

Même si ça semble s'être un peu amélioré. Mais c'est toujours mauvais sur l'écran de mon ordinateur portable, par exemple, alors que sur mes grands écrans au travail, c'est plus visiblement en retrait.

Oui! S'il vous plaît arborer des lignes en option. Ce serait particulièrement utile lorsque l'éditeur est ouvert dans un coin éloigné sur un grand écran.

Lier la bascule au survol de la souris dans le volet Explorateur aiderait à garder l'aspect propre.

Vraiment utile sur les gros projets.
Une mise à jour pour ceci? Ou où je pourrais commencer à chercher dans la source ?

@edmundo096 cela a été fermé en tant que doublon de # 21295, qui est également fermé. Donc je suppose que ça ne va nulle part.

@cosmoKenney Ce problème n'est pas clos...

@cosmoKenney , non, c'est le message d'origine et il n'est pas résolu. #21295 était le doublon.
Je n'ai pas encore trouvé de configuration pour activer ces guides d'indentation sur l'explorateur de la barre latérale.

image

Alors oui... mes yeux saignent. Je suis genre what is index.js of Expression folder... I know you're there! .

Je pense que cela devrait avoir une priorité assez élevée. Les applications Web modernes ont assez souvent une structure de fichiers imbriqués profonds. voir cet exemple

27506535-e5bc7042-58b9-11e7-942c-a592295c143b

et voici le look approximatif sans loupe. pas si mal... si vous avez la vision d'un pilote de chasse

J'aimerais ça aussi, c'est assez facile de se perdre dans des projets plus importants.

Je suis également d'accord que cela devrait être pris en compte, même lorsque vous démarrez un petit projet et que vous connaissez chaque fichier par cœur, c'est un peu ennuyeux de les trouver lorsque vous souhaitez utiliser l'explorateur, et non le "Quick File Opener"...

Je suis d'accord! J'ai essayé de chercher un paramètre ou une extension qui fait cela au cours des deux derniers jours mais rien T_T. J'ai vraiment du mal à naviguer à l'aide de l'explorateur (très utile lorsque vous naviguez dans un nouveau projet).

Les lignes d'indentation seraient incroyables!

Avons-nous une indication si c'est dans la feuille de route?

+1

+1 c'est une énorme douleur pour moi sur mon grand écran.

++1

+1, une raison pour laquelle je pourrais retourner à Atom

+1

+1 Microsoft s'il vous plaît !

+1 pour ça.

En attendant, j'ai trouvé un petit hack pour le résoudre pour l'instant:

Trouvez votre installation VSCode (la mienne était C:/Program Files/Microsoft VS Code ) et allez à resources/app/out/vs/workbench et ouvrez workbench.main.css .

Ajoutez ces lignes à la fin du fichier :

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

Fait!

Ce code indente chaque niveau de 20px supplémentaires, à partir de 0px (le !important remplace les valeurs par défaut), mais bien sûr, vous pouvez changer cela de 20px à autant que vous le souhaitez, il suffit de changer les valeurs. Je n'ai également parcouru que 15 niveaux de profondeur, que vous pouvez également développer, mais si votre projet est plus profond que 15 niveaux, je vous suggère de réévaluer votre structure de répertoires. ;)

@jakewtaylor cela a très bien fonctionné pour moi, le seul problème est que vous recevrez une notification "installation corrompue" après avoir effectué les modifications ( ..plus d'infos ici ).

@jakewtaylor @swordf1zh pourriez-vous fournir une capture d'écran avec ce "hack" ?

Inspiré par votre idée, j'ai créé des styles comme :

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

C'est loin d'être un guide d'indentation solide, mais c'est un pas en avant :
image

@swordf1zh oui, je l'ai eu aussi mais une seule fois. Je ne l'ai pas vu depuis.

@pie6k ça a l'air bien. Votre ajout m'a donné une idée pour l'améliorer légèrement, je vais essayer quand je serai au bureau plus tard.

@pie6k Votre hack serait une solution temporaire parfaite, sauf que cela n'a pas aussi bien fonctionné pour moi pour une raison quelconque T_T (voir photo ci-dessous)

image

@jakewtaylor Je ne peux pas attendre 😄

J'ai quelque chose qui fonctionne plutôt bien. Comme vous l'avez dit, loin d'être parfait, mais rend l'arborescence de fichiers beaucoup plus agréable, IMO.

J'ai mis les instructions dans ce Gist car le CSS est beaucoup plus long maintenant.

Ressemble à ça:
file tree screenshot

J'espère que ça marche pour toi!

Cela fonctionne très bien.
Merci.

Tu as sauvé mes yeux et mon esprit.

Belle amélioration. J'ai changé l'alpha de 0,4 à 0,1 et ça a l'air super, mais c'est juste une préférence personnelle. Si vous pouviez en faire une extension, ce serait certainement l'un des 25 meilleurs :

imagen

Je pense que je vais le faire, il faudra que je me penche dessus. 😃

Mise à jour : il semble que la modification de l'interface utilisateur avec des extensions n'est pas possible pour le moment, vous devrez simplement utiliser les instructions du Gist.

@Winston-Guess a oublié de dire que vous avez besoin position: relative sur .monaco-tree .monaco-tree-rows>.monaco-tree-row lui-même.

@jakewtaylor @swordf1zh - semble incroyable 🎉 🕺 ! Lol enfin !

Oh mon putain de dieu. J'ai cherché cela 4 jours maintenant. J'ai mis du temps à comprendre que le nom de la barre latérale n'est pas Monaco. Veuillez l'implémenter avec différentes variantes.
Ce «style sans ligne» me rend vraiment fou de ne voir aucune ligne ou quoi que ce soit d'autre pour guider mes yeux.
+1 Sur tous ceux qui ont trouvé une solution à cela.

oh mon Dieu, c'est le meilleur. où dois-je envoyer un don!?

@edenprojectde Que voulez-vous dire par "le nom de la barre latérale n'est pas Moncao" ? Avez-vous des noms de classe différents sur votre installation ? Je peux facilement mettre quelques notes dans le Gist pour aider les gens à l'avenir.

@jakewtaylor Non, je veux juste dire que tous les Css que j'ai recherchés dans l'interface graphique portaient le nom monaco, mais aucune indication de "barre latérale". Je viens de changer pour VS Code donc je ne sais pas comment fonctionne la configuration de l'interface graphique, ce n'est pas évident car c'était dans atom.

Juste pour faire passer le message :
grafik
grafik
Aucune indication de la barre latérale de nom dans ces noms de classe.

Je suppose que c'est parce que cela fait partie du cadre que VS Code lui-même ne devrait pas s'inquiéter, c'est plutôt mon manque de compréhension de l'interface graphique elle-même.

Je vois, je n'ai travaillé qu'en utilisant l'inspecteur 😛

Instructions pas à pas (pour macOS)

  1. Installez https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css et redémarrez VS Code
  2. Enregistrez le contenu de cet essentiel dans un fichier, dans mon exemple, c'est /Users/semenov/.vscode/css/tree.css
  3. Ouvrez Préférences > Paramètres et ajoutez ce paramètre :
    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]
  1. Cmd-P, "> Activer les CSS et JS personnalisés", redémarrez VS Code
  2. Ignorer le message "Votre code VS est corrompu"

Après la mise à niveau de VS Code, répétez les étapes 4 et 5.

@IlyaSemenov, pour une raison quelconque, votre méthode ne fonctionne pas pour moi dans les versions normale et initiée. J'ai vu dans les instructions de l'extension que l'étape 4 nécessite des privilèges d'administrateur mais cela ne m'a pas aidé non plus 😕

L'extension et le CSS personnalisé semblent fonctionner pour moi, mais les couleurs des lignes sont orientées vers les thèmes les plus sombres. Voir la capture d'écran...

code explorer lines

...suggestions?

@cosmoKenney Ouais, changez simplement le CSS dans l' essentiel .

La couleur actuelle est rgba(255, 255, 255, 0.4) , qui est blanche à 40 % d'opacité - remplacez toutes les occurrences par la couleur souhaitée.

rgba(0, 0, 0, 0.4) pourrait bien fonctionner pour les arrière-plans clairs (noir à 40 % d'opacité)

@jakewtaylor :
Merci Jacques. Fonctionne bien.
Il ne me reste plus qu'à trouver comment alléger les guides de retrait verticaux dans le volet source. ;-)

+1 👍

@IlyaSemenov merci pour le hack 👍

btw est-ce que quelqu'un connaît une solution pour augmenter l'espace vertical entre les éléments de la liste?

C'est très utile donc je me demande pourquoi personne n'en a jamais fait une extension? Ce serait mon préféré.

Allez Microsoft, vous l'aviez compris en 95

image

Cela doit certainement être une option intégrée bientôt. S'il te plaît :)

Développer les idées de @chentel et @swordf1zh

Lier la bascule au survol de la souris dans le volet Explorateur aiderait à garder l'aspect propre.

J'ai changé l'alpha de 0,4 à 0,1 et ça a l'air super

J'ai bifurqué l'essentiel de @jakewtaylor pour faciliter la navigation. => https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

  • Le dernier élément de l'arborescence obtient la ligne inférieure supprimée
  • Les dossiers et les fichiers se distinguent par la largeur de ligne
  • Les lignes sont normalement presque transparentes, mais leur opacité augmente au survol

Avant contre après

image

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

C'est ce que je recherche.

+1
des plans pour mettre en œuvre cette fonctionnalité indispensable ?

À mon avis, cela devrait être par défaut, et avec une option intégrée pour le désactiver 😬

@miguelkashir Je suis d'accord, et je pense que le nombre de réponses à ce fil en dit long sur le besoin de cela en tant que fonctionnalité intégrée ?

Accepter. Bien que j'apprécie les efforts des personnes qui ont fourni des solutions de contournement CSS, cela devrait figurer dans le produit. L'explorateur devient extrêmement difficile à utiliser sur un grand projet avec de grands moniteurs comme c'est le cas actuellement. Allez Microsoft - s'il vous plaît, corrigez !

Se cogner comme une demande recherchée

+1

Si quelqu'un ne voit aucun changement après avoir créé un fichier CSS personnalisé et l'avoir référencé dans le "vscode_custom_css.imports" , vous pouvez le rendre beaucoup plus simple et sans installer vscode-custom-css - ajoutez simplement le CSS à la fin du workbench.main.css et vous êtes prêt à partir !

@Funghorn Exactement comme dans mon essentiel 😛

@jakewtaylor ouais, mais j'ai pensé que certaines personnes utiliseraient la version "correctionnée" de @ samdenty99 et le fichier CSS personnalisé ne fonctionne pas pour tout le monde ¯_(ツ)_/¯

+1

+1

Les gars, s'il vous plaît arrêtez de commenter +1. C'est embêtant pour les personnes abonnées en attente de solutions, il suffit de 👍 réagir au post initial. 😋

Existe-t-il une option pour cela dans la version Code - Insiders ? Les nouveaux paramètres ont été référencés ici "Provide GUI for settings #3355" c'est pourquoi je demande

@fillipvt Le problème que vous avez lié concerne une interface graphique pour les paramètres, ce problème concerne l'apparence de l'explorateur de fichiers. Je ne pense pas qu'ils soient liés ? (à moins que j'ai raté quelque chose...?)

Certains managers de niveau 4 chez Microsoft :
"Enlevez les lignes, ça a l'air bien plus cool quoi que vous fassiez toute la journée sans ces lignes laides."

+1

+1
2 sous-répertoires et je ressens déjà la douleur

Oui, l'explorateur est un gâchis en ce moment avec rien de plus qu'une couche de dossiers. Quelqu'un at-il fait un PR avec l'une des propositions ici? J'ai vu de très beaux explorateurs moddés dans ce fil

+1

S'il vous plaît, nous avons besoin de plus de contrôle dans cette zone de l'éditeur ! Merci! (Sans la solution hacky)

+1

@samdenty Je ne peux pas accéder à votre essentiel. A-t-il été déplacé ou supprimé ?

J'ai fait un fork de l'essentiel de @jakewtaylor . Il ressemble à celui de Samdenty.
https://gist.github.com/thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c

image

Pour moi, j'ai changé le niveau à 10.

Il y a aussi un petit problème que je ne sais pas comment résoudre. Je ne sais pas si Samdenty a eu le même problème. Son essence n'est plus.

image

@thepixture Ce problème est malheureusement un effet secondaire de la façon dont il fonctionne - il répète simplement la ligne verticale plusieurs fois. Opinion personnelle ici, mais em est plus sûr que px (mon local a été changé ;-) ).

@designbyadrian a changé mon nom d'utilisateur, lien mis à jour https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

+1

Dans la v1.31, un nouveau widget arborescent a été introduit. Le rendu des guides d'indentation serait-il plus facile avec ce nouveau widget ? @isidorn

Pour toute personne utilisant l'extension CSS personnalisée, je l'ai corrigée pour qu'elle fonctionne avec la nouvelle mise à jour de janvier 2019
Il y avait 3 correctifs principaux que j'ai ajoutés,

  1. La classe de ligne d'arbre a été mise à jour de monaco-tree-row à monaco-list-row
  2. Dans le fichier CSS personnalisé, ligne 21, le monica-tree-row avait une règle position: relative , ce qui provoquait des problèmes d'espacement vertical
  3. La div .monaco-tl-twistie avait une règle en ligne margin-left: 40px , que j'ai dû remplacer (ligne 15)

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

Edit : j'ai utilisé l'essentiel de @samdenty comme base, mais vous devrez peut-être le modifier pour qu'il ait l'air "correct".

Edit 2 : j'ai corrigé un problème avec les lignes qui disparaissaient lors du survol ou de la sélection d'un dossier de plus de 3 profondeurs

Edit 3 : Si vous jouez avec ceci , vous pouvez commenter la règle monaco-tl-twistie (lignes 15-17). Je ne savais pas que ce paramètre existait lorsque j'ai corrigé le css (et avec les guides d'indentation, je préfère une indentation plus serrée que de la régler sur 0)

Merci @ Lightfire228

A cessé de fonctionner avec la nouvelle mise à jour. De plus, il y a maintenant un avertissement ennuyeux [non pris en charge] dans la barre de titre. En attente de MS pour mettre à jour l'explorateur.

+1

Je partage les mêmes sentiments que tout le monde; l'indentation de la structure arborescente est beaucoup trop petite pour délimiter efficacement les sous-structures.

Veuillez nous donner quelques options pour changer cela.

Cela fait donc maintenant partie des paramètres de vscode, mais pourquoi est-il limité à 20 max ?

img

Je viens de Sublime et je suis habitué à un retrait beaucoup plus profond, y a-t-il une bonne raison de ne pas autoriser un retrait plus profond ?

ss
vscode max 20 Tree Indent left contre sublime text 3 right

J'ai à peu près abandonné VS Code. C'est juste trop difficile pour moi de voir les fichiers. Et puisque j'ai un abonnement Visual Studio, il est pratiquement évident d'utiliser VS 2017. Une fois que vous l'avez configuré, c'est bien mieux que Code.

Ah, merci, @sguilla - pouvoir changer la taille du retrait résout la plupart des problèmes pour moi !

Je viens de commencer à utiliser VS Code il y a quelques semaines et comme tout le monde, je trouve qu'il est vraiment difficile de dire rapidement dans quels répertoires se trouvent certains fichiers.

Je viens de définir l'option Tree Indent au maximum de 20, mais idéalement, je voudrais la définir encore plus haut.

Il est encore trop difficile de naviguer dans les dossiers sans lignes d'indentation de l'arborescence des répertoires, comme le recommande le message d'origine.

Je vois que ce numéro date de 2016; ça fait 3 ans, s'il vous plaît ajouter quelques lignes d'arbres.

C'est une sorte de rupture d'accord et je devrai peut-être revenir à un autre éditeur entre-temps.

Pour tous ceux qui ne l'ont pas encore fait, merci de "pouce en l'air" le commentaire de départ .
Pour les problèmes ouverts, triés par pouces vers le haut ( is:issue is:open sort:reactions-+1-desc ), nous ne sommes actuellement qu'à la 18e place !
Merci.

J'ai augmenté l'espacement des retraits d'arbre à 20 pixels, mais pour une raison quelconque, lorsque je "recharge" VS Code et/ou le ferme et le rouvre, l'espacement revient à l'espacement d'origine de 8 pixels. Vous pouvez voir visuellement l'espacement sauter de mon réglage de 20px à 8px.

Moi aussi j'utilise le thème Material Icon. Lorsque je désactive le thème, le problème persiste.

Je me demandais simplement si quelqu'un pouvait créer une extension VS Code pour cela. Malheureusement, je n'ai pas d'expérience dans la création d'extensions VS Code (... pas encore)

Mes derniers initiés ont maintenant 40px max. Il manque toujours l'arbre lui-même difficile 🤷‍♂️

Je me demandais simplement si quelqu'un pouvait créer une extension VS Code pour cela. Malheureusement, je n'ai pas d'expérience dans la création d'extensions VS Code (... pas encore)

Il existe une extension CSS personnalisée, comme décrit dans les commentaires ci-dessus. Mais cela est interdit par MicroSoft, vous obtiendrez un avertissement [non pris en charge] dans la barre de titre et cela cessera de fonctionner à chaque mise à jour du code VS. En attente d'une solution officielle.

+1

cela semble beaucoup plus lisible que par défaut :

image

Pour corriger [Unsupported] lorsque vous avez modifié les styles d'origine, utilisez https://github.com/lehni/vscode-fix-checksums

_ L'avertissement [Unsupported] s'affiche lorsque les fichiers principaux sont modifiés (et que leur somme de contrôle diffère de l'original)._

Cette fonctionnalité est si importante qu'elle devrait être prise en charge officiellement, pas seulement un hackaround qui doit être reconfiguré à chaque mise à jour.

C'est drôle, j'ai essayé d'utiliser VSCode il y a quelques années et j'ai été vraiment impressionné, mais même alors, l'indentation et le style de la barre latérale ont trop affecté la lisibilité et je l'ai jeté pour un autre IDE. Pour en revenir maintenant (c'est toujours bon !), Je suis extrêmement surpris que ce soit toujours un problème et je ne suis clairement pas seul à ce sujet. Les guides d'indentation des arbres amélioreraient vraiment la lisibilité : merci de soutenir officiellement cette personnalisation !

Merci pour cette demande de fonctionnalité. Je pensais que j'étais le seul.

Pour moi le pire c'est que les flèches ne sont pas alignées avec d'autres éléments au même niveau :
Capture

Cette fonctionnalité est actuellement au n ° 12 (lorsqu'elle est commandée par pouce vers le haut)

C'est ici depuis 2 ans...

+1, s'il vous plaît corrigez cela, régler Workbench> Tree: Indent sur 19 m'a aidé, mais mec! parler de se perdre dans un arbre massif, cela pourrait fonctionner correctement par défaut avec 1 dossier mais ... Vous remarquerez même que dans VS2017, ils ont ajouté les lignes d'arbre aux instructions if afin que vous puissiez déterminer où vous en êtes sur le niveau de {} retraits. où est l'icône du mal de tête !

Un problème aussi pour moi ! J'ai besoin de lignes pour mieux me concentrer sur l'écriture de code ; pas de difficulté à trouver les bons fichiers à chaque fois

J'ai trouvé un autre fil où ils ont montré que cela avait été résolu (en ajustant tree.indent dans les paramètres)
https://github.com/Microsoft/vscode/issues/35447#issuecomment -455461013

@divinentd La solution à laquelle vous faites référence n'est pas tout à fait la même chose. Cette fonctionnalité est toujours ouverte et concerne le fait d'avoir des arborescences afin que vous puissiez discerner le niveau d'imbrication dans la structure de dossiers de votre projet. Le niveau d'indentation sur l'autre fil est utile pour donner à vos yeux une certaine séparation visuelle, mais ce n'est pas vraiment la même chose que d'avoir des guides d'indentation visuels que vous pouvez obtenir avec des lignes d'arbres.

Solutions de contournement temporaires

Bien que je ne pense pas que ce soit une solution parfaite, si vous avez tendance à avoir des difficultés à voir visuellement l'emplacement d'un fichier pour naviguer dans votre projet, vous pouvez ajouter la fonction de fil d'Ariane en haut de votre éditeur. Vous pouvez ensuite cliquer sur n'importe quel niveau pour voir d'autres fichiers dans ce niveau imbriqué et naviguer en conséquence.

Une autre méthode consiste à connaître le nom du fichier que vous souhaitez ouvrir, appuyez rapidement sur F1, puis supprimez sur votre clavier, ce qui affiche la vue des fichiers dans votre palette de commandes, puis commencez à taper le nom du fichier. De manière pratique, il s'agit également d'une recherche contenant plutôt que d'un début par. Cela vous permet de voir les fichiers disponibles et le dossier dans lequel ils se trouvent. Vous pouvez définir le window.zoomLevel dans votre fichier settings.json pour donner aux choses la taille optimale pour votre efficacité.

Idée supplémentaire pour la mise en œuvre

Comme idée d'extension pour la mise en œuvre, j'envisage différentes lignes colorées configurables pour différents niveaux d'indentation. Par exemple, vous pouvez configurer les niveaux d'indentation en utilisant les couleurs de l'arc-en-ciel dans votre fichier settings.json. Bien sûr, ce serait formidable si la couleur, le style et l'épaisseur de la ligne étaient toutes des options configurables.

  • Rouge - Niveau 1
    -- Orange - Niveau 2
    --- Jaune - Niveau 3
    ---- Vert - Niveau 4
    ----- Bleu - Niveau 5
    ------ Indigo - Niveau 6
    ------- Violette - Niveau 7

Moi aussi, j'aimerais voir cette fonctionnalité arriver bientôt sur VS Code et j'adore la direction dans laquelle le projet évolue. Bon travail les gars !

Demandez et vous serez ignoré

Nous sommes toujours à la 12e place, pour les problèmes ouverts triés par 👍 (pouce en l'air), mais nous comblons rapidement l'écart..

# | Problème ouvert | :+1 : | :-1: | :cœur:
-- | ---------- | ---- | ---- | -------
1 | Autoriser les fenêtres flottantes | 2909 | 40 | 416
2 | Onglets pour borne intégrée | 1293 | 16 | 128
3 | vscode.extensions ne se met pas à jour lors de l'installation/de la suppression/de la désactivation des extensions sans redémarrage | 922 | 0 | 47
4 | Permettre de changer la taille de la police et la police du workbench | 917 | 1 | 123
5 | Actualisation de l'icône du produit VS Code | 825 | 18 | 303
6 | Git : Utiliser VS Code comme éditeur de fusion | 669 | 0 | 105
7 | Prise en charge de l'ouverture d'un dossier de projet dans plusieurs fenêtres VS Code | 630 | 0 | 72
8 | Indentation automatique / Formatage du code / Embellir | 589 | 0 | 45
9 | Enregistrement macro | 586 | 0 | 73
10 | Ajouter une option pour épingler des onglets similaires à Visual Studio | 553 | 0 | 73
11 | Autoriser la personnalisation des raccourcis souris | 521 | 0 | 57
12 | 👉 Guides de retrait de l'arborescence des répertoires dans l'explorateur de fichiers 👈 | 503 | 0 | 84
13 | Fournir une assistance pour synchroniser les paramètres entre les machines | 429 | 0 | 62
14 | Afficher les résultats de la recherche dans un onglet au lieu de la barre latérale | 423 | 0 | 73

Pour ceux qui ne l'ont pas encore fait, veuillez 👍 (pouce en l'air) le commentaire de départ .

Je souhaite que les spammeurs +1 puissent harceler github pour autoriser la désinscription des commentaires uniquement, de la même manière que vous le faites ici :smile:

Avez-vous vu ce message ? https://simonholman.blog/visual-studio-code-finally-has-a-tree-indent-setting/
Il semble que "les guides d'indentation de l'arborescence de répertoires dans l'explorateur de fichiers" fonctionnent maintenant.
Dans les paramètres, recherchez "retrait d'arbre"
réglage> atelier> retrait de l'arbre.

@RoelandJimenez Oui, nous en discutons ci-dessus. Ce n'est pas la même chose que d'avoir des lignes, mais un pas dans la bonne direction.

Cette fonctionnalité devrait avoir chaque programme avec un explorateur de fichiers !

Toute mise à jour?

@Ninroot Ne harcelez pas les développeurs comme ça. Nous recevons des mises à jour lorsqu'une discussion a lieu ou lorsque le statut du ticket change.

s'il vous plaît ajouter cette fonctionnalité !!!!!!!!!

+1

Les gens, pour l'amour de Dieu, s'il vous plaît, arrêtez de spammer ce ticket. L'équipe VS Code est au courant de cette demande.
Si vous voulez dire "+1", votez et choisissez votre réaction (main emoji vers le haut). C'est comme ça que ça marche dans ce référentiel

+1

@kanlukasz Github a récemment ajouté une nouvelle fonctionnalité. Nous ne pouvons souscrire que pour les changements importants et non pour +1 me too pls fix !!!!! 🎉🎉🎉🎉🎉🎉🎉🎉🎉

Chers spammeurs +1 , vous ne m'aurez plus.

Instructions pas à pas (pour macOS)

  1. Installez https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css et redémarrez VS Code
  2. Enregistrez le contenu de cet essentiel dans un fichier, dans mon exemple, c'est /Users/semenov/.vscode/css/tree.css
  3. Ouvrez Préférences > Paramètres et ajoutez ce paramètre :
    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]
  1. Cmd-P, "> Activer les CSS et JS personnalisés", redémarrez VS Code
  2. Ignorer le message "Votre code VS est corrompu"

Après la mise à niveau de VS Code, répétez les étapes 4 et 5.

Eh bien, cela ne semble pas faire effet.

Ceci est actuellement sur le plan d'itération de juin 2019 # 75103 en tant que "Ajouter la prise en charge des guides d'indentation dans les arbres".

Cela a été poussé à maîtriser : https://github.com/microsoft/vscode/commit/036278c3ed0ef39274fa68e11e472fbd05f3e9d0 Il sortira demain sur Insiders ! :les feux d'artifices:

Peek 2019-06-18 15-07

Il est livré avec un nouveau paramètre workbench.tree.renderIndentGuides avec les options suivantes :

  • none , ne restituez rien
  • onHover , rend les guides non intéressants uniquement au survol. Rendre toujours des guides intéressants (nœuds d'arbre sélectionnés et ciblés).
  • always , rend tous les guides tout le temps : à la fois intéressants et non intéressants.

N'oubliez pas de l'essayer cette semaine et de nous faire part de vos commentaires ! Encore une fois : devrait sortir dans Insiders de demain.

Existe-t-il un moyen de le styler comme dans le premier message, comme dans la ligne pointant vers des fichiers/dossiers ?
Aussi, possibilité de changer le style de ligne également : pointillé, plein, ... ?

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

Existe-t-il un moyen de le styler comme dans le premier message, comme dans la ligne pointant vers des fichiers/dossiers ?
Aussi, possibilité de changer le style de ligne également : pointillé, plein, ... ?

Pas pour l'instant, non. Nous essayons de répondre aux deux objectifs : relever le défi de la perception de la hiérarchie tout en gardant un style visuel cohérent et léger. Nous verrons comment cela se passe.

@joaomoreno ça a l'air cool, mais ce serait bien si ces guides étaient un peu plus visibles

image

En ce moment, je peux à peine le voir

En ce moment, je peux à peine le voir

Il devrait y avoir une option pour les laisser tels qu'ils sont maintenant.

@joaomoreno Il devrait y avoir des paramètres sous workbench.colorCustomizations comme les guides d'indentation de l'éditeur, ce qui permettrait certaines des personnalisations demandées par les gens.

@KamasamaK :

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

Alors... n'y aura-t-il pas de lignes horizontales dans les fichiers ? C'est un peu éloigné des fichiers. Déplacer un peu la ligne horizontale vers la droite serait également très utile pour la rendre plus visible/claire. (Je suis reconnaissant pour les lignes de toute façon, mais ce serait bien d'avoir)

J'aimerais une option entre "aucun" et "onHover" qui montre toujours les guides intéressants, mais ne montre pas ceux qui ne sont pas intéressants en survol.

Ce serait aussi cool en survol d'avoir tous les dossiers parents du fichier survolé en surbrillance

Si vous voulez obtenir une alternative décente pour cela aujourd'hui :

"workbench.tree.indent": 32

image

Ajustez au besoin.

Cette page vous a été utile?
0 / 5 - 0 notes