TechWiese Blog
Visual Studio Code (9): Konfiguration und Personalisierung
19. Februar 2016
Tobias Kahlert
Dieser Blogbeitrag ist ein Repost und stammt im Original aus dem Know-how-Bereich von TechWiese, dessen Artikel in diesem Blog aufgegangen sind.
Wie jeder gute Codeeditor lässt sich auch Visual Studio Code (VS Code) auf verschiedene Art und Weise konfigurieren und personalisieren. Dabei geht VS Code aber einen viel direkteren Weg als viele andere Editoren. Anstatt Einstellungen in Menüs vorzunehmen, können in VS Code Konfigurationsdateien direkt bearbeitet werden. Dies sollte Nutzer aber nicht abschrecken, denn so ist eine stufenlose Nutzung der aus dem Editor bekannten Funktionen auch bei der Konfiguration möglich. Außerdem ist so ein einfaches Kopieren und Verarbeiten möglich. Fast alle Einstellungen liegen in JSON-Dateien vor und besitzen vollständige Schemata. Das bedeutet, dass VS Code Informationen und Hilfen bei den einzelnen Einstellungen anbietet, die die Konfiguration des Editors vereinfachen.
VS Code lässt sich außerdem durch Extensions um Funktionen und Themes erweitern. So lassen sich beispielsweise weitere Sprachen mit Codeunterstützung und Debuggern installieren. Diese Erweiterungen findet man im Visual Studio Marketplace unter https://marketplace.visualstudio.com/#VSCode. Mit Extensions im Allgemeinen und der Entwicklung im Speziellen beschäftigen sich bereits zwei Artikel dieser Serie.
Themes
Visual Studio Code kommt standardmäßig in dunklen Farben daher. Dies lässt sich aber mit ein paar Klicks ändern, denn VS Code unterstützt Themes, die die Farben des Editors und der Syntaxhervorhebung anpassen. Mit dem Kommando Preferences: Color Theme oder über das Menü „File -> Preferences -> Color Theme“ lässt sich ein Dropdown-Menü einblenden, aus dem die verschiedenen Themes mit den Pfeiltasten ausgewählt werden können. Dabei färbt sich der Editor sofort in dem gewählten Schema. Mit Enter bestätigt man die Auswahl und speichert diese dauerhaft.
Benutzereinstellungen
Die Benutzereinstellungen von VS Code lassen sich über das Kommando Preferences: Open User Settings aufrufen. Es öffnen sich zwei Editorfenster mit JSON-Dateien: Rechts wird die Datei mit den momentanen Benutzereinstellungen angezeigt und links sind die Standardeinstellungen zu sehen. Nur die rechte Seite lässt sich bearbeiten. Die linke Seite ist zur Überschicht und Information gedacht, so werden hier u.a. alle möglichen Einstellungen aufgelistet. Optionen lassen sich einfach im JSON-Format in die rechte Seite eintragen. Mit Strg+Leertaste werden die momentanen Möglichkeiten beim Cursor angezeigt. Fährt man mit der Maus über eine Einstellung, werden außerdem weitere Erklärungen eingeblendet. Nach dem Speichern werden die neuen Einstellungen sofort übernommen. Auf diese Weise lässt sich der komplette Editor konfigurieren.
Workspace Settings
Zusätzlich zu den Benutzereinstellungen gibt noch die sog. Workspace Settings oder Projekteinstellungen. Mit deren Hilfe kann der Editor je nach geöffnetem Projekt individuell angepasst werden kann. Dies funktioniert nur, wenn mit VS Code ein Ordner geöffnet wurde. Denn nur in diesem Fall wird im Unterordner .vscode nach der Datei settings.json gesucht. Ist diese vorhanden, überschreiben die Einstellungen aus dieser Datei die Benutzereinstellungen, solange der Ordner geöffnet ist. Diese Workspace Settings sind wunderbar geeignet, um projektspezifische Einstellungen vorzunehmen. Zum Beispiel lassen sich so bestimmte Ordner oder Dateien aus der Ordneransicht ausblenden. Eine solche Einstellung macht natürlich im Kontext eines Projektes wesentlich mehr Sinn als in den allgemeinen Einstellungen.
Keyboard Shortcuts
Visual Studio Code legt besonderen Wert darauf, effizient mit der Tastatur bedient werden zu können. Um die vorhandenen Tastenkürzel zu komplettieren, werden ausführliche Möglichkeiten angeboten, eigene Tastenkürzel zu definieren. Wie auch bei den Benutzereinstellungen findet die Konfiguration von Tastatur-Shortcuts in einer JSON-Datei statt. Über das Kommando Preferences: Open Keyboard Shortcuts lässt diese sich öffnen. Auch in diesem Fall öffnen sich zwei Fenster, wobei im linken alle Standard-Tastenkürzel aufgelistet sind. Zusätzlich erscheint am unteren rechten Fensterrand ein grüner Knopf, der eine interaktive Eingabe von Tastaturkürzeln ermöglicht und nach der Bestätigung mit Enter eine neue Vorlage für das eingegebene Tastenkürzel einfügt. Ein Tastenkürzel besteht dabei aus drei Eigenschaften:
- key: Muss die ausgeschriebene Tastenkombination enthalten.
- commnd: Beschreibt das Kommando, das ausgeführt werden soll (zum Beispiel action.find, um eine Suche in der momentanen Datei zu starten).
- when: Ein JavaScript-Ausdruck, der bestimmt, unter welchen Umständen das Kommando ausgeführt werden soll. (kann weggelassen werden)
Für eine Liste mit Kommandos orientiert man sich am besten an den bereits bestehenden Tastenkürzeln, die im linken Fenster angezeigt werden.
Neben normalen Tastenkürzeln sind auch sogenannte Tasten-Akkorde möglich. Um diese zu aktivieren, muss nicht nur eine Taste sondern mehrere Tasten hintereinander gedrückt werden. In der key-Eigenschaft werden diese mit einem Leerzeichen getrennt. Um zum Beispiel die Suche zu aktivieren, wenn zweimal hintereinander Strg+f gedrückt wurde, muss die key-Eigenschaft auf Ctrl+f Ctrl+f gesetzt werden.
Snippets
Um noch produktiver Code schreiben zu können, unterstützt VS Code auch Snippets. Das sind kleine Code-Schnipsel, die man vermutlich immer wieder benötigt. Aktiviert wird ein Snippet, indem man den Anfang seines Präfixes in den Texteditor eingibt. Daraufhin zeigt VS Code alle Snippets an, die das passende Präfix aufweisen. Mit einem Druck auf Tab wird die Eingabe mit dem Snippet ersetzt. Zusätzlich können im Snippet noch Stellen angegeben sein, die der Benutzer wahrscheinlich ändern möchte. Diese können dann durch weiteres Drücken auf Tab durchgeschaltet werden.
VS Code liefert zwar für die verschiedenen Sprachen bereits vordefinierte Snippets mit, der Benutzer kann aber auch eigene Snippets definieren. Das Kommando Preferences: Snippets öffnet eine Liste mit unterstützten Sprachen. Hier kann die gewünschte Sprache ausgewählt werden und es öffnet sich eine leere JSON-Datei. Snippets sind wie im folgenden Beispiel aufgebaut (hier für TypeScript):
{
// Ein Snippet
"Export function": {
// Die ersten Buchstaben, die eingegeben werden müssen, um das Snippet zu aktivieren
"prefix": "exf",
// Der Inhalt des Snippets besteht aus einer Liste von Codezeilen
// Mit “${…}” markierte Stellen sind Platzhalter
// und können später mit Tab der Reihe nach durchgeschaltet werden
"body": [
"export function ${funcName}(${param}: ${type}): ${void} {",
" ${}",
"}"
],
// Beschreibung des Snippets
"description": "Creates a new export function."
}
}
Nach dem Speichern steht das Snippet sofort in einer Datei mit der entsprechenden Sprache zur Verfügung. Gibt man nun exf ein, zeigt Visual Studio sofort das Snippet mit einer Erklärung an. Durch Bestätigung mit Enter wird das Snippet eingefügt. Funktionsname, Parametername, Parametertyp und Rückgabetyp sind dann schon mit Platzhaltern gefüllt. Mit Tab können diese durchgegangen und geändert werden. Zuletzt bleibt der Cursor im Funktionskörper stehen.
Wichtige Ressourcen
- Kostenloser Download: Visual Studio Code
- Video Serie zu Visual Studio Code auf Channel 9
- Übersichtsvideo (english) zu Visual Studio Code
- Visual Studio Code auf Twitter: @Code
- Visual Studio Code-Dokumentation
- Visual Studio Code Blog
- Verwandtes Produkt: Visual Studio Community (ebenfalls kostenlos)
Visual Studio Code Artikelserie
Grundlagen
- Die Grundlagen
- Installation
- Die Arbeitsumgebung
- Produktiver durch den richtigen Einsatz der Suchfunktion
- Git als Quellcodeverwaltung einsetzen
- Tasks, Erstellen und Debuggen
- Konfiguration und Personalisierung
Extensions
Weitere Beiträge