Visual Studio Code – die wichtigsten Tipps & Tricks für Ein- und Umsteiger

Viele meiner Kollegen verwenden den kostenlosen Quelltext-Editor Visual Studio Code für die Softwareentwicklung im professionellen Bereich. Der schlanke und erweiterbare Editor aus dem Hause Microsoft wird dabei sogar integrierten Entwicklungsumgebungen wie IntelliJ, Eclipse oder NetBeans vorgezogen.

Ohne die alte Frage beantworten zu wollen, ob mit einem gut konfigurierten Texteditor auf den Einsatz einer IDE verzichtet werden kann, wollen wir in diesem Workshop VSCode so einrichten, dass es als vollwertiger Ersatz für eine Integrierte Entwicklungsumgebung betrieben werden kann.

Hierfür schaffen wir in VSCode ein Setup aus Plugins und Einstellungen, das alle gewohnten Funktionalitäten einer vollwertigen IDE zur Verfügung stellt.

Passende Plugins

VSCode bietet eine schier unerschöpfliche Anzahl an Erweiterungsmöglichkeiten in Form von Plugins. Bevor wir nun unser Web-Frontend-Projekt in VSCode betreiben, wollen wir die wichtigsten Plugins installieren, die uns bei der Verwaltung unseres Projektcodes unterstützen können.

Verfügbare Plugins können im Menüpunkt „Extensions“ der Side Bar gefunden und installiert werden. Außerdem kann hier eingesehen werden, welche Plugins aktuell installiert, deaktiviert oder veraltet sind. Jedes Plugin findet sich über die Eingabe des hier angegebenen Namens in das Suchfeld. Durch einen Klick auf den Button „Install“ wird das entsprechende Plugin heruntergeladen und installiert.

ANZEIGE DER CODESTRUKTUR

Zur Anzeige der inneren Codestruktur einer Quellcodedatei ist kein Plugin erforderlich. Man findet hierfür bereits im Menüpunkt „Explorer“ der Side Bar den Bereich „Outline“. Beim Öffnen einer Quellcodedatei werden hier alle enthaltenen Programmelemente angezeigt. So können beispielsweise definierte Klassen, Funktionen oder Variablen auf einen Blick eingesehen und mit einem Klick auf das entsprechende Element im Code Editor erreicht werden.

ANZEIGE DER KLASSENHIERARCHIE

Class IO: Class IO shows class relationships with its interfaces and parent class in a non-obstructive way.

Das Plugin „Class IO“ erkennt die Zusammenhänge aller vorhandenen TypeScript-Klassen und -Schnittstellen und stellt beim Auswählen eines Programmelements dessen Hierarchie dar. Diese Funktionalität ist besonders wichtig, um schnell Zusammenhänge zwischen den Klassen in fremden Codeprojekten oder externen Bibliotheken zu erkennen.

NEUER BEREICH „FAVORITEN“

Favorites: Add files and directories to workspace favorites.

Das Plugin „Favorites“ bietet den gleichnamigen neuen Bereich im Menüpunkt Explorer der Side Bar. Hier können Referenzen auf häufig verwendete Dateien oder Ordner abgelegt und mit einem Klick darauf schnell erreicht werden. Nach der Installation des Plugins steht beim Rechtsklick auf ein beliebiges Dateielement der neue Befehl „Favorites: Add to favorites“ zur Verfügung, mit dem das Element im neuen Bereich „Favorites“ abgelegt werden kann.

NEUER BEREICH „TODOS“

Todo Tree: Add files and directories to workspace favorites.

Das Plugin „Todo Tree“ fügt ein neues Fenster zum Explorer hinzu, in dem alle Codestellen aufgelistet werden, die mit einem TODO- oder FIXME-Kommentar gekennzeichnet sind. Auch wenn diese Praxis von sehr vielen Entwicklern als ein Antipattern angesehen wird, findet man in Legacy-Projekten häufig diese Markierungen vor, die auf eine erforderliche Nachbearbeitung hinweisen.

Gilt in einem Team das Alignment, dass alle neu erstellten TODO-Kommentare vor der Reintegration eines Feature-Branches entfernt sein müssen, so kann dieses Feature in der Praxis aber auch gewinnbringend eingesetzt werden.

ESLINT-INTEGRATION

ESLint: Integrates ESLint JavaScript into VS Code.

Unmittelbar nach der Installation dieses Plugins kann die Funktionalität des Code-Linters ESLint im Editor getestet werden. Beispielsweise löst die Überschreitung des Hard Limits von 120 Zeichen pro Zeile eine ESLint-Warnung aus, die im Editorfenster in der entsprechenden Zeile markiert wird. Darüberhinaus erscheint im Bereich „Problems“, das über den Menübefehl View > Problems eingeblendet werden kann, der Fehler in seiner vollen Beschreibung. Das Regelwerk für ESlint ist in der Datei .eslintrc.js unseres Projekts festgehalten und kann dort feingranular angepasst werden.

JEST-SUPPORT

Jest: Use Facebook’s Jest With Pleasure.

Jest ist ein Testing-Framework für JavaScript- und React-Anwendungen. Nach der Installation des Plugins kann mittels View > Command Palette > Jest: Start Runner der Jest-Runner im Hintergrund gestartet werden. Danach werden alle Tests unter src/test/ initial und bei einer Veränderung des Projektcodes oder der Tests direkt ausgeführt. Eine Änderung beispielsweise der erwarteten Resultate in Tests (in der Datei src/test/de/mayflower/chuck/util/Content.test.tsx) zeigt die fehlgeschlagenen Testergebnisse sofort im Editor und im Menüpunkt „Problems“ der Side Bar.

Code-Editor-Einstellungen

Alle Einstellungen von VSCode finden sich unter Code > Preferences > Settings. Alle vom Standard abweichenden Einstellungen werden in einer Config-Datei namens settings.json festgehalten, die sich an der folgenden Stelle im Benutzerverzeichnis des aktuellen Benutzers befindet:

OS	Sitz der Einstellungsdateien
macOS	~/Library/Application Support/Code/User/settings.json
Windows 10	C:\Users\%username%\AppData\Roaming\Code\User\settings.json

Hier können alle Änderungen im JSON-Format hinzugefügt werden. Das ermöglicht die Angabe von Einstellungen, die nicht explizit im Einstellungsmenü von VSCode aufgeführt sind.

An dieser Stelle möchte ich ein paar interessante Einstellungen für VSCode vorstellen, die ich im Zuge der Anpassung von VSCode als Ersatz für eine Entwicklungsumgebung zusammengetragen habe:

Alle Elemente der Benutzeroberfläche mit einem hellen Theme darstellen

    "workbench.colorTheme": "Default Light+",

Die aktuelle Cursorzeile in der angegebenen Farbe hervorheben

    "editor.renderLineHighlight": "all",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#ffffaaff"
    }

Geänderte Dateien automatisch speichern, wenn VSCode den Programmfokus verliert

    "files.autoSave": "onFocusChange",

Alle Whitespaces im Editor anzeigen

    "editor.renderWhitespace": "all",

Whitespaces am Zeilenende automatisch entfernen

    "files.trimTrailingWhitespace": true,

Alle Vorkommnisse des Programmelements unter dem Cursor in der angegebenen Farbe hervorheben

    "editor.occurrencesHighlight": true,
    "workbench.colorCustomizations": {
        "editor.selectionHighlightBackground": "#ffdd99ff",
        "editor.wordHighlightBackground": "#ffdd99ff",
        "editor.wordHighlightStrongBackground": "#ffdd99ff"
    },

Warnungen und Fehler im Programmcode in den angegebenen Farben unterringeln

    "workbench.colorCustomizations": {
        "editorWarning.foreground": "#ff9900ff",
        "editorError.foreground": "#ff0000ff"
    }, 

Vertikales Lineal bei Spalte 120 anzeigen, um damit das Hard Limit der Quellcodedatei sichtbar zu machen

    "editor.rulers": [ 120 ],

Shortcuts

Shortcuts können unter VSCode unter dem Menüpunkt Code > Preferences > Keyboard Shortcuts angepasst werden. Darüberhinaus ermöglicht VSCode die Verwendung und Anpassung kompletter bestehender Shortcut Maps, die als Erweiterungen installiert werden können und auf denen aufgebaut werden kann. Beispielsweise kann mit dem Plugin „Eclipse Keymap“ die Standardeinstellung der Keymappings für die Entwicklungsumgebung Eclipse importiert und angepasst werden:

Analog zur Config-Datei settings.json existiert auch für die Keymappings eine Einstellungsdatei keybindings.json, in der Anpassungen des aktuell verwendeten Key-Shortcut-Schemas definiert werden können und die sich im gleichen Benutzerverzeichnis befindet:

OS	Sitz der Einstellungsdateien
macOS	~/Library/Application Support/Code/User/keybindings.json
Windows	C:\Users\%username%\AppData\Roaming\Code\User\keybindings.json

Auch hierfür habe ich die interessantesten Shortcuts festgehalten und stelle Sie kurz vor:

Mit dem Cursor an das linke oder rechte Ende eines Worts springen

    {
        "key": "cmd+left",
        "command": "cursorWordLeft"
    },
    {
        "key": "cmd+right",
        "command": "cursorWordRight"
    },

Zur letzten oder nächsten Cursorposition springen

    {
        "key": "alt+left",
        "command": "workbench.action.navigateBack"
    },
    {
        "key": "alt+right",
        "command": "workbench.action.navigateForward"
    }, 

Zum linken oder rechten Editor-Tab wechseln

    {
        "key": "alt+cmd+left",
        "command": "workbench.action.showPreviousWindowTab"
    },
    {
        "key": "alt+cmd+right",
        "command": "workbench.action.showNextWindowTab"
    },

Editor nach oben oder unten scrollen

    {
        "key": "ctrl+up",
        "command": "workbench.action.terminal.scrollUp",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+down",
        "command": "workbench.action.terminal.scrollDown",
        "when": "terminalFocus"
    },

Zeile oder Auswahl löschen

    {
        "key": "cmd+d",
        "command": "editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },

Zeile oder Auswahl duplizieren

    {
        "key": "shift+cmd+d",
        "command": "editor.action.duplicateSelection"
    },

Editor maximieren

    {
        "key": "cmd+m",
        "command": "workbench.action.maximizeEditor"
    },

Refactoring „Umbenennen“ für das Programmelement unter dem Cursor ausführen

    {
        "key": "shift+alt+r",
        "command": "editor.action.rename",
        "when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
    },

In den Spalten-Editiermodus wechseln

    {
        "key": "shift+cmd+c",
        "command": "columnSelect"
    },

Alle geänderten Dateien speichern

    {
        "key": "cmd+s",
        "command": "workbench.action.files.saveAll"
    },

Alle Vorkommnisse des aktuellen Programmelements finden

    {
        "key": "cmd+g",
        "command": "references-view.find",
        "when": "editorHasReferenceProvider"
    },

Zur Definition des Programmelements unter dem Cursor springen

    {
        "key": "f3",
        "command": "editor.action.goToTypeDefinition"
    },

Import der Einstellungen

Die Einstellungsdateien settings.json und keybindings.json können, wie hier beschrieben, komplett angepasst aus meinem GitHub-Repository für macOS und Windows heruntergeladen werden.

VSCode ist unbezahlbar!

Visual Studio Code ist der beste kostenfreie Quellcode-Editor den ich bisher im professionellen Bereich kennengelernt habe. VSCode erscheint schlank, erweiterbar und hochkonfigurierbar. Durch die Erweiterung mit wenigen Plugins macht der Code Editor schnell den Eindruck einer kompletten Entwicklungsumgebung.

Die Ausstattung und Erweiterung von VSCode mit zahlreichen beliebigen Plugins ermöglicht eine sehr flexibel ausgerichtete Konfiguration, mit der sehr viele Programmiersprachen und Frameworks unterstützt werden können. Darüberhinaus gibt es mit VSCodium auch eine telemetrie- und lizenzfreie Open-Source Variante von VSCode.

Ich würde mich sehr freuen, wenn dieser Artikel einen schnellen und praktischen Einstieg in die Arbeit mit VSCode geben konnte. Über Feedback oder Rückfragen zu allen Punkten dieses Artikels könnt ihr mich sehr gerne via christopher.stock@mayflower.de erreichen.