IDE/ Editor customisation

[cnoss]

No description provided.

[mariofaske]

Erste Idee zur Struktur

Basics:
cutomization
handy shortcuts
Key-Mapping???
Terminal
extensions

Advanced:
debugging
eigene Snippets
git integration
more extensions

[mariofaske]

Aufgrund folgenden Fundes, wurde dieses Tutorial zunächst erstmal nicht weiter geschrieben:

https://code.visualstudio.com/docs/getstarted/tips-and-tricks

Dieses Tutorial richtet sich an die Leute, welche Visual Studio Code(LINK) als Einstiegs-IDE verwenden wollen, oder auf diese IDE umsteigen. Dieser erste Teil gliedert sich in folgende Kapitel:

1. UI Erklärung und Anpassung
2. Shortcuts
3. Shortcuts-Anpassung und allg. Einstellungen
4. Terminal
5. Git Integration

UI

Wenn man VSC startet, ohne eine Datei oder Ordner ausgewählt zu haben, bekommt man folgenden Willkommens-Screen zu sehen.

Dieser Screen bietet schon einige Information und Möglichkeiten, was die nächsten Schritte sein könnten.

Als Grundlage für die weitere Erklärung des User Interfaces dient folgender Screen, welcher über den zweiten Punkt unter Learn "Interface overview" erreichtbar ist.

Command Palette

Das wohl wichtigste UI Element, da hierrüber die komplette VSC IDE gesteuert werden kann. Mittels ctrl/cmd + shift + p öffnet man das Suchfeld dieser Command Palette und kann dann alle Einstellungen und Funktionen von VSC und den installierten Extensions aufrufen.

File Explorer

Der erste Punkt am linken Bildschirmrand ist der File Explorer. Wie in anderen IDE's auch, zeigt dieser einzelne Dateien, Ordner oder die ganze Projektstruktur.
Der Explorer wird noch in 3 weitere Fenster aufgeteilt:

• Im Editor geöffnete Dateien (OPEN EDITORS)
• Das geöffnete Projekt (Q-GATEWAY im Beispiel)
• Alle Variablen, Funktionen etc. einer geöffneten und fokusierten Datei (OUTLINE)

Rechts neben diesen 3 Fenstern befindet sich der eigentliche Editor und eine "Minimap" am rechten Bildschirmrand, welches ein Springen an bestimmte Stellen des Dokuments ermöglicht.

Search

Der zweite Punkt ist ein Fenster, welches eine ausführliche und detailierte Suche über alle Datein des Projektes ermöglich.
Neben der Standartsuche direkt im Dokument mittels strg/cmd + f, kann auch im gesamten Projekt gesucht werden, mittels shift + strg/cmd + f. Die folgende Abbildung zeigt dabei den Unterschied, wenn man zum Beispiel nach "addService" in einem Dokument (Suchfeld rechts oben im Editor) und nach "addService" im gesamten Projekt sucht. Das ist zum Beispiel hilfreich wenn man alle Aufrufe einer expoertierten Funktionen in einem Projekt finden möchte und den Export selbst.

Source Control

VSC bietet von Haus aus eine native Integration von Git als Versionskontrollsystem. Weitere Versionierungssysteme können über Extension hinzugefügt werden, dazu später mehr.

Genua wie der Befehl "git status" im Terminal:

zeigt das Source Control Fenster für git den Status des lokalen Repositories an:

Zusätzlich kann man Änderungen an den Dokumenten im Editor anzeigen lassen und eine commit-message verfassen.
Alle Basic-Funktionen und mehr von git stehen zur Verfügung, weitere durch Extensions. Genaueres dazu später.

Debug

Unter dem vierten Punkt befindet sich das Debugging. Folgende Abbildung zeigt diesen Punkt mit seinen 5 Fenstern:

• Auflistung aller Variablen des laufenden Projekts(VARIABLES)
• Ausgewählte Variablen, welche "beobachtet" werden (WATCH)
• Auflistung aller Aufrufe seit der Ausführung des Projekts (CALL STACK)
• Auflistung aller ausgeführten Dateien/Scripts (LOADED SCRIPTS)
• Gesetzte Breakpoints oder Exceptions (BREAKPOINTS)

Ähnlich wie in anderen IDE's kann man an verschiedenen Stellen im Programmcode, links neben der Zeilennummer, Breakpoints setzen, an denen VSC die Ausführung anhällt und die in der Abbildung zu sehenden Fenster anzeigt.
Mit Hilfe des kleinen Fensters oben rechts kann die Programmausführung gesteuert werden. Zum Beipsiel kann man zu vorherigen und nächsten Breakpoints springen, oder Breakpoints ganz überspringen.

Extensions

Einer der wichtigsten Punkte, um Visual Studio Code an die eigenen Bedürfnisse anzupassen und zu erweitern. VSC zeigt neben den installierten Erweiterungen auch Vorschläge an, basierend auf geöffnete Projekte, Dateien und anderes.
Wenn man im Suchfeld zum Beispiel c# eingibt, bekommt man verschiedene Extensions für diese Programmiersprache, wie in folgender Abbildung zu sehen.
Im Advanced Tutorial gehe ich genauer auf bestimmte, meiner Meinung nach, essentielle Extensions ein.

UI anpassen

Shortcuts

Anpassungen und Einstellungen

Integrated Terminal

Git Integration