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.
Inhaltsverzeichnis
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.
Live Share
Mittels Visual Studio Live Share können mehrere Entwickler gemeinsam arbeiten. Man sieht live, was der andere macht, welchen Text er markiert etc. Die Funktionalität geht über eine reine Bildschirmfreigabe hinaus: lokal laufende Dienste sind für alle Teilnehmer der Sitzung erreichbar. Dies erspart in einigen Fällen einen Testserver.
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.