Die besten Erweiterungen für Visual Studio Code

Mittlerweile kennen (hoffentlich) die meisten Admins das geniale Visual Studio Code. Die Genialität von VS Code liegt an dessen Erweiterbarkeit. Für alle erdenklichen Zwecke gibt es eine passende Erweiterung. In diesem Beitrag beschreibe ich die von mir verwendeten Erweiterungen. Die Liste ist alphabetisch sortiert und wird von Zeit zu Zeit aktualisiert.

Debugger for Chrome

Der Debugger for Chrome verbindet den Debugger von VS Code mit dem Chrome Browser. Man kann eine Website im Chrome anschauen und das JavaScript in VS Code debuggen: Haltepunkte setzen, den Inhalt von Variablen anschauen etc.

Meine Konfiguration zum Debuggen von Angular sieht wie folgt aus:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "runtimeArgs": [
                "--proxy-server=localhost:1234"
            ],
            "request": "launch",
            "url": "http://localhost:5500/index_debug.html",
            "webRoot": "${workspaceFolder}",
            "skipFiles": ["lib.js"]
        }
    ]
}

Das startet eine neue Instanz von Chrome, verwendet einen Proxy (ich setze Fiddler ein) und ignoriert die Datei "lib.js". In dieser befinden sich Angular und andere Frameworks, die ich nicht debuggen will.

Gulp Tasks

Gulp Tasks liest Gulp-Dateien ("gulpfile.js") aus und listet die darin enthaltenen Tasks auf. Diese lassen sich dann direkt aus VS Code mit gulp starten.

Falls man gulp noch nicht kennt: es ist auf jeden Fall einen Blick wert. Es erleichtert Routine-Aufgaben in der Webentwicklung wie das Verkleinern und Verketten von JavaScript-Dateien, das Kompilieren von SASS etc.

htmltagwrap

Mittels htmltagwrap kann man den markierten Text in ein wählbares HTML-Tag einschliessen. Dies ist sehr hilfreich, wenn man in einem Textdokument jeden Abschnitt in ein <p>-Tag versetzen will.

HTTP Server

Wie der Name schon sagt, kann man mit HTTP Server einen Webserver starten. Dieser liefert die Dateien im geöffneten Verzeichnis aus. Er fügt in die Seiten ein Script ein, mit welchem er Seiten automatisch neu lädt, sobald man eine Änderung gemacht hat. Man muss also nicht dauernd die Seite im Browser aktualisieren.

npm

Mit npm lassen sich npm-Scripts aus VS Code heraus ausführen. Dies erspart einem eine separate Kommandozeile für "npm install" etc.

Prettify JSON

Das ist schnell erklärt: Prettify JSON formatiert JSON leserlich.

TortoiseSVN

Praktisch, wenn man mit SVN arbeitet: TortoiseSVN integriert dessen Funktionen wie Update, Commit etc. in Visual Studio Code.

XML Tools

Die XML Tools erleichtern den Umgang mit XML-Dokumenten. Sie können XML-Code schön formatieren, als Baum darstellen und XPath-Ausdrücke evaluieren. Dabei sind auch grosse Dateien (> 100 MB), an denen andere Editoren scheitern, kein Problem.