Vscode: Verzeichnisbaum-Einzugshilfen im Datei-Explorer

Erstellt am 23. Dez. 2016  ·  124Kommentare  ·  Quelle: microsoft/vscode

Es ist schwierig, durch Projekte mit einer komplexen Verzeichnisstruktur zu navigieren.

Viel besser sieht man sich sowas an:

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

An Stelle von:

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

Hilfreichster Kommentar

image

Also ja... meine Augen bluten. Ich bin wie what is index.js of Expression folder... I know you're there! .

Ich denke, es sollte eine ziemlich hohe Priorität haben. Moderne Web-Apps haben oft eine tief verschachtelte Dateistruktur. siehe dieses Beispiel

Alle 124 Kommentare

Ich stimme dem zu. Ich finde besonders, dass die Einrückung schwer zu interpretieren ist. Und es ist noch schlimmer, wenn Dateisymbole im Explorer aktiviert sind.

Ich stimme auch zu! +1

Eine andere Sache, die in dieser Hinsicht nett wäre, wäre das Anpassen des Einzugsabstands der nächsten Hierarchieebene.
Obwohl ich auch einige Richtlinien lieben würde, denke ich, dass es schon sehr hilfreich wäre, z. B. den doppelten Abstand und damit eine klarere Trennung zu haben.

@ Aides359 Ich stimme zu. Die Augen eines jeden Menschen sind anders. Schauen Sie sich einfach die Registerkarten an. Manche Leute mögen 2 Leerzeichen in ihrem Code. Manche mögen 8. Andere 4.

Ich bin ein wenig Legastheniker, also habe ich wirklich Schwierigkeiten mit der Einrückung in VS Code,

Auch wenn es anscheinend etwas besser geworden ist. Aber auf meinem Laptop-Bildschirm ist es zum Beispiel immer noch schlecht, während es auf meinen großen Monitoren bei der Arbeit deutlicher eingerückt ist.

Ja! Bitte Baumlinien als Option. Es wäre besonders hilfreich, wenn der Editor auf einem großen Monitor in einer entfernten Ecke geöffnet ist.

Das Binden des Umschalters an das Mouse-Over im Explorer-Fenster würde helfen, das saubere Aussehen zu erhalten.

Wirklich nützlich bei großen Projekten.
Gibt es hierzu Neuigkeiten? Oder wo ich in der Quelle anfangen könnte zu suchen?

@ edmundo096 dies wurde als Dup von # 21295 geschlossen, das ebenfalls geschlossen ist. Also denke ich, dass das nirgendwohin führt.

@cosmoKenney Dieses Thema ist nicht geschlossen...

@cosmoKenney , nein, dies ist der ursprüngliche Beitrag und er ist nicht gelöst. #21295 war das Duplikat.
Ich konnte noch keine Konfiguration finden, um diese Einzugsführungen im Sidebar Explorer zu aktivieren.

image

Also ja... meine Augen bluten. Ich bin wie what is index.js of Expression folder... I know you're there! .

Ich denke, es sollte eine ziemlich hohe Priorität haben. Moderne Web-Apps haben oft eine tief verschachtelte Dateistruktur. siehe dieses Beispiel

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

und hier ist das ungefähre Aussehen ohne Lupe. nicht so schlimm ... wenn Sie die Vision eines Kampfpiloten haben

Das würde mir auch gefallen, da kann man sich in größeren Projekten leicht verirren.

Ich stimme auch zu, dass dies berücksichtigt werden sollte, selbst wenn Sie ein kleines Projekt starten und jede Datei auswendig kennen, ist es irgendwie lästig, sie zu finden, wenn Sie den Explorer und nicht den "Quick File Opener" verwenden möchten ...

Ich stimme zu! Ich habe in den letzten zwei Tagen versucht, nach einer Einstellung oder Erweiterung zu suchen, die dies tut, aber nichts T_T. Ich habe wirklich Probleme, mit dem Explorer zu navigieren (sehr hilfreich, wenn Sie durch ein neues Projekt navigieren).

Einzugslinien wären toll!

Haben wir Hinweise darauf, ob dies in der Roadmap enthalten ist?

+1

+1 Das ist ein enormer Schmerz für mich auf meinem großen Monitor.

++1

+1, ein Grund, warum ich zu Atom zurückkehren könnte

+1

+1 Microsoft bitte!

+1 dafür.

In der Zwischenzeit habe ich einen kleinen Hack gefunden, um es vorerst zu lösen:

Suchen Sie Ihre VSCode-Installation (meine war C:/Program Files/Microsoft VS Code ) und gehen Sie zu resources/app/out/vs/workbench und öffnen Sie workbench.main.css .

Fügen Sie diese Zeilen am Ende der Datei hinzu:

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

Fertig!

Dieser Code rückt jede Ebene um weitere 20 Pixel ein, beginnend bei 0 Pixel (die !important überschreiben die Standardwerte), aber natürlich können Sie dies von 20 Pixel auf so viel ändern, wie Sie möchten, ändern Sie einfach die Werte. Ich bin auch nur 15 Ebenen tief gegangen, die Sie auch erweitern können, aber wenn Ihr Projekt tiefer als 15 Ebenen ist, würde ich vorschlagen, dass Sie Ihre Verzeichnisstruktur neu bewerten. ;)

@jakewtaylor das hat bei mir super funktioniert, das einzige Problem ist, dass Sie nach den Änderungen eine Benachrichtigung über eine beschädigte Installation erhalten ( ..weitere Informationen hier ).

@jakewtaylor @swordf1zh könntest du einen Screenshot mit diesem 'Hack' bereitstellen?

Inspiriert von Ihrer Idee habe ich Stile erstellt wie:

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

Es ist alles andere als eine solide Anleitung zum Einrücken, aber es ist ein Schritt nach vorne:
image

@swordf1zh ja, das habe ich auch, aber nur einmal. Seitdem nicht mehr gesehen.

@pie6k das sieht gut aus. Deine Ergänzung hat mich auf die Idee gebracht, es etwas zu verbessern, ich werde es später im Büro ausprobieren.

@pie6k Dein Hack wäre eine perfekte vorübergehende Lösung, außer dass es für mich aus irgendeinem Grund nicht so gut funktioniert hat T_T (siehe Bild unten)

image

@jakewtaylor Ich kann es kaum erwarten 😄

Ich habe etwas, das ziemlich gut funktioniert. Wie Sie sagten, alles andere als perfekt, aber der Dateibaum sieht viel schöner aus, IMO.

Ich habe die Anweisungen in diesen Gist eingefügt , da das CSS jetzt viel länger ist.

Sieht aus wie das:
file tree screenshot

Hoffe, es funktioniert für Sie!

Das funktioniert sehr gut.
Danke schön.

Du hast meine Augen und meinen Verstand gerettet.

Schöne Verbesserung. Ich habe das Alpha von 0,4 auf 0,1 geändert und es sieht toll aus, ist aber nur eine persönliche Präferenz. Wenn Sie daraus eine Erweiterung machen können, wäre es sicher eine der Top25:

imagen

Ich denke das werde ich machen, da muss ich mich mal umsehen. 😃

Update: Es sieht so aus, als ob das Bearbeiten der Benutzeroberfläche mit Erweiterungen in der Zwischenzeit nicht möglich ist, Sie müssen nur die Anweisungen aus dem Gist verwenden.

@Winston-Guess hat vergessen zu sagen, dass Sie position: relative für .monaco-tree .monaco-tree-rows>.monaco-tree-row selbst benötigen.

@jakewtaylor @swordf1zh - sieht toll aus 🎉 🕺 ! Lach endlich!

Oh mein verdammter Gott. Ich habe jetzt 4 Tage danach gesucht. Ich habe eine Weile gebraucht, um zu verstehen, dass der Name der Seitenleiste nicht Monaco ist. Bitte setzen Sie dies mit verschiedenen Varianten um.
Dieser „linienlose Stil“ macht mich wirklich wahnsinnig, wenn ich keine Linien oder irgendetwas anderes sehe, um meine Augen zu führen.
+1 An alle, die eine Lösung dafür gefunden haben.

oh mein gott, das ist das beste. wohin schicke ich eine Spende!?

@edenprojectde Was meinst du mit "der Name der Seitenleiste ist nicht Moncao"? Haben Sie unterschiedliche Klassennamen in Ihrer Installation? Ich kann ganz einfach einige Notizen in den Gist einfügen, um Menschen in Zukunft zu helfen.

@jakewtaylor Nein, ich meine nur, alle CSS, die ich in der GUI nachgeschlagen habe, hatten den Namen Monaco, aber keinen Hinweis auf "Seitenleiste". Ich habe gerade zu VS Code gewechselt, also wusste ich nicht, wie die Konfiguration der GUI funktioniert, es ist nicht offensichtlich, da es in Atom war.

Nur um es auf den Punkt zu bringen:
grafik
grafik
Kein Hinweis auf die Namensseitenleiste in diesen Klassennamen.

Ich nehme an, weil es Teil des Frameworks ist, nichts gegen Code selbst, sollte man sich Sorgen machen, es ist eher mein mangelndes Verständnis der GUI selbst.

Ich verstehe, ich habe nur mit dem Inspektor 😛 gerechnet

Schritt-für-Schritt-Anleitung (für macOS)

  1. Installieren Sie https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css und starten Sie VS Code neu
  2. Speichern Sie den Inhalt dieses Kerns in einer Datei, in meinem Beispiel ist es /Users/semenov/.vscode/css/tree.css
  3. Öffnen Sie Einstellungen > Einstellungen und fügen Sie diese Einstellung hinzu:
    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]
  1. Cmd-P, "> Benutzerdefiniertes CSS und JS aktivieren", starten Sie VS Code neu
  2. Verwerfen Sie die Meldung „Ihr VS-Code ist beschädigt“.

Wiederholen Sie nach dem Upgrade von VS Code die Schritte 4 und 5.

@IlyaSemenov aus irgendeinem Grund funktioniert Ihre Methode für mich weder in der normalen noch in der Insider-Version. Ich habe in der Anleitung der Erweiterung gesehen, dass für Schritt 4 Administratorrechte erforderlich sind, aber das hat mir auch nicht geholfen 😕

Die Erweiterung und das benutzerdefinierte CSS scheinen für mich zu funktionieren, aber die Linienfarben orientieren sich an den dunkleren Themen. Siehe Screenshot...

code explorer lines

...Anregungen?

@cosmoKenney Ja, ändere einfach das CSS im Wesentlichen .

Die aktuelle Farbe ist rgba(255, 255, 255, 0.4) , was Weiß bei 40 % Deckkraft ist - ändern Sie alle Vorkommen davon in die gewünschte Farbe.

rgba(0, 0, 0, 0.4) eignet sich möglicherweise gut für helle Hintergründe (schwarz mit 40 % Deckkraft).

@jakewtaylor :
Danke Jake. Funktioniert gut.
Jetzt muss ich nur noch herausfinden, wie ich die vertikalen Einzugshilfslinien im Quellbereich aufhellen kann. ;-)

+1 👍

@IlyaSemenov danke für den Hack 👍

Übrigens kennt jemand eine Lösung, um den vertikalen Abstand zwischen den Listenelementen zu vergrößern?

Das ist sehr nützlich, also frage ich mich, warum noch nie jemand eine Erweiterung daraus gemacht hat? Es wäre mein Favorit.

Komm schon, Microsoft, du hattest es 1995 herausgefunden

image

Dies muss definitiv bald eine integrierte Option sein. Bitte :)

Erweiterung der Ideen von @chentel und @swordf1zh

Das Binden des Umschalters an das Mouse-Over im Explorer-Fenster würde helfen, das saubere Aussehen zu erhalten.

Ich habe das Alpha von 0,4 auf 0,1 geändert und es sieht großartig aus

Ich habe das Wesentliche von @jakewtaylor gegabelt, um die Navigation zu vereinfachen. => https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

  • Beim letzten Baumelement wird die untere Zeile entfernt
  • Ordner und Dateien sind anhand der Linienbreite unterscheidbar
  • Linien sind normalerweise fast transparent, erhöhen aber die Deckkraft beim Schweben

Vorher vs nachher

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

Das ist, wonach ich suche.

+1
Gibt es Pläne, diese dringend benötigte Funktion zu implementieren?

Meiner Meinung nach sollte dies standardmäßig sein und mit einer integrierten Option zum Deaktivieren 😬

@miguelkashir Ich stimme zu, und ich denke, die Anzahl der Antworten auf diesen Thread spricht Bände für die Notwendigkeit, dies als integrierte Funktion zu verwenden?

Zustimmen. Obwohl ich die Bemühungen von Leuten schätze, die CSS-Problemumgehungen bereitgestellt haben, sollte dies im Produkt enthalten sein. Der Explorer wird bei einem großen Projekt mit großen Monitoren, wie es im Moment der Fall ist, extrem schwierig zu verwenden. Komm schon Microsoft - bitte beheben!

Als gesuchte Anfrage auftauchen

+1

Wenn jemand nach dem Erstellen einer benutzerdefinierten CSS-Datei und dem Verweis darauf in "vscode_custom_css.imports" keine Änderungen sieht, können Sie es viel einfacher und ohne Installation von vscode-custom-css zum Laufen bringen - fügen Sie einfach das CSS am Ende der workbench.main.css und los geht's!

@Funghorn Genau wie in meinem Kern 😛

@jakewtaylor ja, aber ich dachte, einige Leute würden die "gepatchte" Version von @samdenty99 verwenden und die benutzerdefinierte CSS-Datei funktioniert nicht für alle ¯_(ツ)_/¯

+1

+1

Leute, bitte hört auf, +1 zu kommentieren. Es ist ärgerlich für Abonnenten, die auf Lösungen warten, einfach 👍 auf den ersten Beitrag reagieren. 😋

Gibt es dafür eine Option im Code – Insiders-Build? Auf die neuen Einstellungen wurde hier verwiesen "GUI für Einstellungen # 3355 bereitstellen", deshalb frage ich

@fillipvt Das von Ihnen verlinkte Problem betrifft eine GUI für Einstellungen. Bei diesem Problem geht es um das Erscheinungsbild des Datei-Explorers. Ich glaube nicht, dass sie verwandt sind? (es sei denn, ich habe etwas übersehen...?)

Einige Tier-4-Manager bei Microsoft:
"Entfernen Sie die Linien, es sieht viel cooler aus, was auch immer Sie den ganzen Tag tun, ohne diese hässlichen Linien."

+1

+1
2 Unterverzeichnisse und schon spüre ich den Schmerz

Ja, der Explorer ist im Moment ein Chaos mit mehr als einer Ordnerebene. Hat jemand eine PR mit einem der Vorschläge hier gemacht? Ich habe in diesem Thread einige wirklich toll aussehende gemoddete Entdecker gesehen

+1

Bitte wir brauchen mehr Kontrolle in diesem Bereich des Editors! Danke schön! (Ohne die Hacky-Lösung)

+1

@samdenty Ich kann nicht auf deinen Kern zugreifen. Wurde es verschoben oder gelöscht?

Ich habe eine Abspaltung von @jakewtaylors Kern gemacht. Es sieht genauso aus wie das von Samdenty.
https://gist.github.com/thepixture/72f5090e7fab8edae3d1dc1fb59f9f5c

image

Für mich habe ich das Level auf 10 geändert.

Außerdem gibt es ein kleines Problem, von dem ich nicht weiß, wie ich es beheben kann. Ich weiß nicht, ob Samdenty das gleiche Problem hatte. Sein Kern ist nicht mehr.

image

@thepixture Dieses Problem ist leider ein Nebeneffekt der hackigen Funktionsweise - es wiederholt einfach die vertikale Linie mehrmals. Persönliche Meinung hier, aber em ist sicherer als px (mein lokaler wurde geändert ;-) ).

@designbyadrian hat meinen Benutzernamen geändert, Link aktualisiert https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6

+1

In v1.31 wurde ein neues Baum-Widget eingeführt. Wäre das Rendern von Einzugshilfslinien mit diesem neuen Widget einfacher? @isidorn

Für alle, die die benutzerdefinierte CSS-Erweiterung verwenden, ich habe sie so korrigiert, dass sie mit dem neuen Update vom Januar 2019 funktioniert
Es gab 3 Hauptkorrekturen, die ich hinzugefügt habe,

  1. Die Baumzeilenklasse wurde von monaco-tree-row auf monaco-list-row aktualisiert
  2. In der benutzerdefinierten CSS-Datei, Zeile 21, hatte monica-tree-row eine position: relative -Regel, was zu Problemen mit dem vertikalen Abstand führte
  3. Das .monaco-tl-twistie div hatte eine Inline- margin-left: 40px -Regel, die ich außer Kraft setzen musste (Zeile 15)

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

Bearbeiten: Ich habe das Wesentliche von @samdenty als Basis verwendet, aber Sie müssen es möglicherweise optimieren, damit es "richtig" aussieht.

Bearbeiten 2: Ich habe ein Problem behoben, bei dem die Zeilen verschwanden, wenn man mit der Maus darüber schwebte oder einen Ordner auswählte, der mehr als 3 tief war

Bearbeiten 3: Wenn Sie damit spielen , können Sie die Regel monaco-tl-twistie (Zeile 15-17) auskommentieren. Ich wusste nicht, dass diese Einstellung existierte, als ich das CSS reparierte (und mit den Einrückungshilfslinien bevorzuge ich eine engere Einrückung, als diese auf 0 zu setzen).

Danke @Lightfire228

Mit dem neuen Update funktioniert es nicht mehr. Außerdem gibt es jetzt eine lästige [nicht unterstützte] Warnung in der Titelleiste. Warten, bis MS den Explorer aktualisiert.

+1

Ich wiederhole die gleichen Gefühle wie alle anderen; Die Einrückung der Baumstruktur ist viel zu klein, um Unterstrukturen effektiv abzugrenzen.

Bitte geben Sie uns einige Optionen, um dies zu ändern.

Das ist jetzt ein Teil der vscode-Einstellungen, aber warum ist es auf maximal 20 begrenzt?

img

Ich komme von Sublime und bin einen viel tieferen Einzug gewöhnt, gibt es einen guten Grund, einen tieferen Einzug nicht zuzulassen?

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

Ich habe VS Code ziemlich aufgegeben. Es ist einfach zu schwer für mich, die Dateien zu sehen. Und da ich ein Visual Studio-Abonnement habe, ist es so ziemlich ein Kinderspiel, VS 2017 zu verwenden. Sobald Sie es eingerichtet haben, ist es viel besser als Code.

Ah, danke, @sguilla - die Möglichkeit, die Einzugsgröße zu ändern, behebt die meisten Probleme für mich!

Ich habe erst vor ein paar Wochen angefangen, VS Code zu verwenden, und wie alle anderen finde ich, dass es wirklich schwer ist, schnell zu erkennen, in welchen Verzeichnissen sich bestimmte Dateien befinden.

Ich habe die Option Tree Indent nur auf das Maximum von 20 eingestellt, aber idealerweise würde ich sie noch höher einstellen wollen.

Es ist immer noch zu schwierig, in Ordnern ohne Verzeichnisbaum-Einrückungszeilen zu navigieren, wie es der ursprüngliche Beitrag empfiehlt.

Wie ich sehe, ist diese Ausgabe von 2016; Es ist 3 Jahre her, bitte fügen Sie einige Baumlinien hinzu.

Dies ist eine Art Deal Breaker und ich muss in der Zwischenzeit möglicherweise zu einem anderen Editor zurückkehren.

Für alle, die es noch nicht getan haben, bitte "Daumen hoch" für den Startkommentar .
Bei offenen Fragen, sortiert nach Daumen hoch ( is:issue is:open sort:reactions-+1-desc ), sind wir derzeit nur auf Platz 18!
Danke.

Ich habe den Baumeinzugsabstand auf 20 Pixel erhöht, aber aus irgendeinem Grund, wenn ich VS Code "neu lade" und/oder ihn schließe und wieder öffne, wird der Abstand auf den ursprünglichen Abstand von 8 Pixel zurückgesetzt. Sie können visuell sehen, wie der Abstand von meiner 20px-Einstellung zurück auf 8px springt.

Auch ich verwende das Material Icon Theme. Wenn ich das Theme deaktiviere, besteht das Problem weiterhin.

Ich frage mich nur, ob jemand dafür eine VS-Code-Erweiterung erstellen könnte. Leider habe ich (noch) keine Erfahrung mit der Erstellung von VS-Code-Erweiterungen

Meine neuesten Insider haben jetzt maximal 40 Pixel. Der Baum selbst fehlt immer noch hart 🤷‍♂️

Ich frage mich nur, ob jemand dafür eine VS-Code-Erweiterung erstellen könnte. Leider habe ich (noch) keine Erfahrung mit der Erstellung von VS-Code-Erweiterungen

Es gibt eine benutzerdefinierte CSS-Erweiterung, wie in den obigen Kommentaren beschrieben. Dies wird jedoch von Microsoft verboten, Sie erhalten eine [nicht unterstützte] Warnung in der Titelleiste und es funktioniert nicht mehr, wenn VS-Code aktualisiert wird. Warten auf eine offizielle Lösung.

+1

das sieht viel besser lesbar aus als standardmäßig:

image

Um [Unsupported] zu reparieren, wenn Sie die ursprünglichen Stile geändert haben, verwenden Sie https://github.com/lehni/vscode-fix-checksums

_ Eine [Unsupported] -Warnung wird angezeigt, wenn Core-Dateien geändert werden (und ihre Prüfsumme vom Original abweicht)._

Dieses Feature ist so wichtig, dass es offiziell unterstützt werden sollte, nicht nur irgendein Hackaround, der bei jedem Update neu konfiguriert werden muss.

Es ist lustig, ich habe vor ein paar Jahren versucht, VSCode zu verwenden, und war wirklich beeindruckt, aber selbst dann haben die Einrückung und der Stil der Seitenleiste die Lesbarkeit zu sehr beeinträchtigt, und ich habe es für eine andere IDE abgeladen. Um jetzt darauf zurückzukommen (es ist immer noch gut!) Ich bin sehr überrascht, dass dies immer noch ein Problem ist, und ich bin damit eindeutig nicht allein. Die Baumeinrückungshilfen würden die Lesbarkeit wirklich verbessern: Bitte unterstützen Sie diese Anpassung offiziell!

Danke für diese Funktionsanfrage. Ich dachte, ich sei der Einzige.

Das Schlimmste für mich ist, dass die Pfeile nicht mit anderen Elementen auf derselben Ebene ausgerichtet sind:
Capture

Diese Funktion befindet sich derzeit auf Platz 12 (bei Bestellung mit Daumen nach oben)

Das gibt es hier seit 2 Jahren...

+1, bitte beheben Sie das, indem Sie die Workbench > Tree: Indent auf 19 setzen, hat mir geholfen, aber Mann! Sprechen Sie davon, sich in einem riesigen Baum zu verirren, es könnte standardmäßig mit 1 Ordner funktionieren, aber ... Sie werden sogar bemerken, dass sie in VS2017 die Baumlinien zu den if-Anweisungen hinzugefügt haben, damit Sie herausfinden können, wo Sie sich auf dem befinden Ebene von {} Einzügen. Wo ist das Kopfschmerz-Symbol!

Auch für mich ein Problem! Ich brauche Zeilen, um mich besser auf das Schreiben von Code zu konzentrieren; Sie müssen nicht jedes Mal die richtigen Dateien finden

Ich habe einen anderen Thread gefunden, in dem gezeigt wurde, dass dies behoben wurde (durch Anpassen von tree.indent in den Einstellungen).
https://github.com/Microsoft/vscode/issues/35447#issuecomment -455461013

@divinentd Die Lösung, auf die Sie sich beziehen, ist nicht ganz dasselbe. Diese Funktion ist noch offen und bezieht sich auf Baumlinien, damit Sie die Verschachtelungsebene innerhalb der Ordnerstruktur Ihres Projekts erkennen können. Die Einrückungsebene auf dem anderen Thread ist nützlich, um Ihren Augen eine gewisse visuelle Trennung zu geben, ist aber nicht wirklich dasselbe wie visuelle Einrückungshilfen, die Sie mit Baumlinien erhalten können.

Vorübergehende Problemumgehungen

Obwohl ich nicht denke, dass dies eine perfekte Lösung ist, können Sie, wenn Sie Schwierigkeiten haben, den Speicherort einer Datei visuell zu erkennen, um in Ihrem Projekt zu navigieren, die Breadcrumbs-Funktion oben in Ihrem Editor hinzufügen. Sie können dann auf eine beliebige Ebene davon klicken, um andere Dateien innerhalb dieser verschachtelten Ebene anzuzeigen und entsprechend zu navigieren.

Eine andere Möglichkeit besteht darin, wenn Sie den Namen der Datei kennen, die Sie öffnen möchten, drücken Sie schnell F1 und löschen Sie dann auf Ihrer Tastatur, wodurch die Dateiansicht in Ihrer Befehlspalette angezeigt wird, und beginnen Sie dann mit der Eingabe des Dateinamens. Praktischerweise ist dies auch eine enthält Suche und nicht eine beginnt mit. Dadurch können Sie die verfügbaren Dateien und den Ordner, in dem sie sich befinden, sehen. Sie können window.zoomLevel in Ihrer settings.json-Datei festlegen, um die Dinge auf die Größe zu bringen, die für Ihre Effizienz optimal ist.

Zusätzliche Idee für die Umsetzung

Als Erweiterungsidee für die Umsetzung stelle ich mir verschieden konfigurierbare farbige Linien für unterschiedliche Ebenen der Einbuchtung vor. Beispielsweise könnten Sie die Einzugsebenen mit den Farben des Regenbogens in Ihrer Datei settings.json einrichten. Natürlich wäre es großartig, wenn die Linienfarbe, -stil und -stärke alle konfigurierbare Optionen wären.

  • Rot - Stufe 1
    -- Orange - Stufe 2
    --- Gelb - Stufe 3
    ---- Grün - Stufe 4
    ----- Blau - Stufe 5
    ------ Indigo – Stufe 6
    ------- Violett - Stufe 7

Auch ich würde gerne sehen, dass diese Funktion bald in VS Code verfügbar ist, und ich liebe die Richtung, in die sich das Projekt bewegt. Gute Arbeit, Leute!

Fragt und ihr werdet ignoriert

Wir sind immer noch auf Platz 12, für offene Probleme sortiert nach 👍 (Daumen hoch), aber wir schließen schnell die Lücke..

# | Offenes Problem | :+1: | :-1: | :Herz:
-- | ---------- | ---- | ---- | -------
1 | Schwebende Fenster zulassen | 2909 | 40 | 416
2 | Laschen für integriertes Terminal | 1293 | 16 | 128
3 | vscode.extensions wird beim Installieren/Entfernen/Deaktivieren von Erweiterungen ohne Neustart nicht aktualisiert | 922 | 0 | 47
4 | Ermöglicht das Ändern der Schriftgröße und Schriftart der Workbench | 917 | 1 | 123
5 | Aktualisieren des VS Code-Produktsymbols | 825 | 18 | 303
6 | Git: VS Code als Merge-Editor verwenden | 669 | 0 | 105
7 | Unterstützung zum Öffnen eines Projektordners in mehreren VS Code-Fenstern | 630 | 0 | 72
8 | Automatischer Einzug / Codeformatierung / Verschönern | 589 | 0 | 45
9 | Makroaufnahme | 586 | 0 | 73
10 | Hinzufügen einer Option zum Anheften von Registerkarten ähnlich wie in Visual Studio | 553 | 0 | 73
11 | Anpassung von Maus-Shortcuts zulassen | 521 | 0 | 57
12 | 👉 Anleitungen zum Einrücken von Verzeichnisbäumen im Datei-Explorer 👈 | 503 | 0 | 84
13 | Bereitstellung von Unterstützung zum Synchronisieren von Einstellungen zwischen Computern | 429 | 0 | 62
14 | Suchergebnisse in einem Tab statt in der Seitenleiste anzeigen | 423 | 0 | 73

Für alle, die es noch nicht getan haben, bitte 👍 (Daumen hoch) den Startkommentar .

Ich wünschte, +1-Spammer könnten Github belästigen, um nur das Abbestellen von Kommentaren zuzulassen, so wie Sie es hier tun :smile:

Hast du diesen Beitrag gesehen? https://simonholman.blog/visual-studio-code-finally-has-a-tree-indent-setting/
Scheint, als ob "Verzeichnisbaum-Einzugshilfen im Datei-Explorer" jetzt funktionieren.
Suchen Sie in den Einstellungen nach "Baumeinzug"
Einstellung > Workbench > Baumeinzug.

@RoelandJimenez Ja, wir haben es oben besprochen. Es ist nicht dasselbe wie Linien zu haben, aber ein Schritt in die richtige Richtung.

Diese Funktion sollte jedes Programm mit einem Dateiexplorer haben!

Irgendein Update?

@Ninroot Belästige Entwickler nicht so. Wir erhalten Updates, wenn eine Diskussion stattfindet oder wenn sich der Ticketstatus ändert.

Bitte fügen Sie diese Funktion hinzu !!!!!!!!!!

+1

Leute, um Gottes willen, hört bitte auf, dieses Ticket zu spammen. Das VS Code-Team weiß von dieser Anfrage.
Wenn Sie "+1" sagen möchten, stimmen Sie einfach ab und wählen Sie Ihre Reaktion aus (Emoji-Hand nach oben). So funktioniert es in diesem Repository

+1

@kanlukasz Github hat kürzlich eine neue Funktion hinzugefügt. Wir können nur für wichtige Änderungen abonnieren und nicht für +1 me too pls fix !!!!! 🎉🎉🎉🎉🎉🎉🎉🎉🎉

Liebe +1 Spammer, ihr werdet mich nicht wieder haben.

Schritt-für-Schritt-Anleitung (für macOS)

  1. Installieren Sie https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css und starten Sie VS Code neu
  2. Speichern Sie den Inhalt dieses Kerns in einer Datei, in meinem Beispiel ist es /Users/semenov/.vscode/css/tree.css
  3. Öffnen Sie Einstellungen > Einstellungen und fügen Sie diese Einstellung hinzu:
    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]
  1. Cmd-P, "> Benutzerdefiniertes CSS und JS aktivieren", starten Sie VS Code neu
  2. Verwerfen Sie die Meldung „Ihr VS-Code ist beschädigt“.

Wiederholen Sie nach dem Upgrade von VS Code die Schritte 4 und 5.

Nun, es scheint keine Wirkung zu zeigen.

Dies ist derzeit im Iterationsplan Nr. 75103 vom Juni 2019 als „Unterstützung für Einzugsführungen in Bäumen hinzufügen“ enthalten.

Dies wurde zum Master gepusht: https://github.com/microsoft/vscode/commit/036278c3ed0ef39274fa68e11e472fbd05f3e9d0 Es wird morgen auf Insiders veröffentlicht! :Feuerwerk:

Peek 2019-06-18 15-07

Es kommt mit einer neuen Einstellung workbench.tree.renderIndentGuides mit den folgenden Optionen:

  • none , einfach nichts rendern
  • onHover , uninteressante Guides nur beim Hover rendern. Rendern Sie immer interessante Leitfäden (ausgewählte, fokussierte Baumknoten).
  • always , rendere alle Guides die ganze Zeit: sowohl interessant als auch uninteressant.

Denken Sie daran, es diese Woche auszuprobieren und Feedback zu geben! Nochmal: sollte bei den Insidern von morgen herauskommen.

Gibt es eine Möglichkeit, es wie im ersten Beitrag zu gestalten, wie in der Zeile, die auf Dateien/Ordner zeigt?
Auch die Möglichkeit, den Linienstil zu ändern: gepunktet, durchgezogen, ...?

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

Gibt es eine Möglichkeit, es wie im ersten Beitrag zu gestalten, wie in der Zeile, die auf Dateien/Ordner zeigt?
Auch die Möglichkeit, den Linienstil zu ändern: gepunktet, durchgezogen, ...?

Nicht für jetzt, nein. Wir versuchen, beide Ziele zu erreichen: die Herausforderung der Hierarchiewahrnehmung anzugehen und gleichzeitig einen konsistenten, leichten visuellen Stil beizubehalten. Wir werden sehen, wie das geht.

@joaomoreno sieht cool aus, wäre aber toll, wenn diese Guides etwas besser sichtbar wären

image

Im Moment kann ich es kaum sehen

Im Moment kann ich es kaum sehen

Es sollte eine Option geben, sie so zu belassen, wie sie jetzt ist.

@joaomoreno Es sollte Einstellungen unter workbench.colorCustomizations geben, wie es die Editor-Einrückungsleitfäden haben, die einige der von den Leuten gewünschten Anpassungen ermöglichen würden.

@KamasamaK :

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

Also... gibt es keine horizontalen Linien in den Dateien? Es ist irgendwie weit entfernt von den Dateien. Es wäre auch sehr hilfreich, die horizontale Linie ein wenig nach rechts zu verschieben, um sie besser sichtbar / klarer zu machen. (Ich bin so oder so dankbar für die Zeilen, aber es wäre schön, sie zu haben)

Ich würde eine Option zwischen "none" und "onHover" lieben, die immer die interessanten Guides zeigt, aber nicht die uninteressanten beim Hover zeigt.

Es wäre auch cool, beim Hover alle übergeordneten Ordner der Hover-Datei hervorzuheben

Wenn Sie heute eine anständige Alternative dafür bekommen möchten:

"Werkbank.Baum.Einzug": 32

image

Passen Sie nach Bedarf an.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen