File Nesting Addon für Visual Studio und Angular


Wenn man sich an den offiziellen Guide oder die Angular CLI hält, dann wird es sehr schnell sehr unübersichtlich in den einzelnen Verzeichnissen für eine Angular Anwendung. Denn zu den meisten TypeScript Dateien gibt es noch die passende HTML, Style oder Testdatei. Schon bei einfachen Verzeichnissen kann das ganze im Explorer bereits folgendermaßen aussehen.

image

Oft muss man aber nur die TypeScript Datei anpassen und benötigt die Styles oder Templates gar nicht. Damit man nicht so schnell den Überblick verliert und man besser erkennt welche Dateien zusammengehören, hilft einem das File Nesting Addon für Visual Studio. Denn die oben gezeigten Dateien sehen dann in VS folgendermaßen aus

image

und wenn das ganze dann aufgeklappt ist, sieht man auch die zugehörigen Template Dateien und Styles falls vorhanden.

image

image

Leider ging Autonesting bei mir in VS 2015 Update 3 nicht und ich muss die jeweiligen Dateien selbst auswählen. Dafür wählt man z.B. einfach seine HTML und less Datei aus und mit einem Rechtsklick steht einem im Menü dann “File Nesting” => “Nest Item…”  zur Verfügung.

image

Dann geht ein kleines Modal auf in dem man das Root Element auswählen kann, in meinem Fall ist es immer die zugehörige TypeScript Datei gewesen, das wiederholt man für alle Dateien die man nesten möchte und schon hat man wieder Ordnung in seinen Ordnern.

image

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s