User Documentation VS Code – Eine beliebte kostenlose IDE
Aus Wikipedia:
Visual Studio Code, häufig auch als VS Code bezeichnet, ist ein von Microsoft entwickelter Quellcode-Editor für Windows, Linux und macOS. Zu den Funktionen gehören Unterstützung für Debugging, Syntaxhervorhebung, intelligente Codevervollständigung, Codeschnipsel, Code-Refactoring und eingebettetes Git. Benutzer können das Design, Tastenkombinationen und Einstellungen ändern sowie Erweiterungen installieren, die zusätzliche Funktionen hinzufügen.
Installation
Die Standardseite der VS Code-Website enthält eine Dropdown-Liste für jede unterstützte Plattform. Es ist wahrscheinlich, dass Ihre Plattform bereits vorausgewählt ist. Also einfach herunterladen und installieren, schon kann es losgehen.
Erste Schritte
Die Seite Erste Schritte von VS Code enthält einige Start-Einträge, eine Liste der zuletzt verwendeten Elemente und eine kurze Liste von Rundgängen. Wer völlig neu bei VS Code ist, sollte sich diese ansehen. Sie dauern nur wenige Minuten.
Die VS Code-Dokumentation ist über das Menü Hilfe / Dokumentation verfügbar. Die Einführungsvideos lohnen sich sehr. Jedes dauert 2 bis 6 Minuten und bietet eine ausgezeichnete Einführung in die Funktionen von VS Code.
Die offizielle Dokumentation ist die richtige Anlaufstelle, um gezielt nach bestimmten Informationen zu suchen.
VS Code-Erweiterungen
VS Code kann für jede Art von Text verwendet werden, einschließlich einer Vielzahl von Programmiersprachen. Es funktioniert mit JavaScript ohne zusätzliche Erweiterungen. Andere Sprachen werden anhand des Kontexts erkannt. Wenn also mit dem Erstellen und Speichern von PHP-Code begonnen wird, erscheint wahrscheinlich eine Aufforderung, ein PHP-Support-Paket zu installieren.
Auf das Erweiterungen-Symbol in der linken Aktivitätsleiste klicken, um zu sehen, was bereits installiert ist und was empfohlen wird. Die PHP-Debug-Erweiterung wird benötigt!
Der Bildschirmaufbau von VS Code
Einige Begriffe, die in den folgenden Anweisungen verwendet werden:
- Aktivitätsleiste die schmale Leiste auf der linken Seite des Bildschirms. Ein beliebiges Symbol auswählen, um die primäre Seitenleiste zu öffnen oder zu schließen.
- Primäre Seitenleiste zeigt bei geöffnetem Zustand Details zur ausgewählten Aktivität an.
- Statusleiste am unteren Bildschirmrand. Sie zeigt an, was gerade geschieht.
- Panel ein Bereich unterhalb der Texteditoren zur Anzeige weiterer Informationen.
Ein Layout-Symbol oben rechts auswählen, um einen dieser Bereiche zu öffnen oder zu schließen.
Programmieren einer Joomla-Erweiterung
Beim Erstellen einer Erweiterung besteht das Ziel darin, eine ZIP-Datei zu erzeugen, die auf einer funktionierenden Joomla-Website installiert werden kann. Dafür wird ein Verzeichnis benötigt, das den Code enthält. Dieses sollte sich innerhalb des persönlichen Dateibereichs auf dem für die lokale Entwicklung verwendeten Laptop oder Desktop-Computer befinden. Es sollte sich nicht im Verzeichnisbaum der Website befinden. Zum Beispiel könnte ~/jextensions verwendet werden, um Unterverzeichnisse für verschiedene Erweiterungen zu enthalten. Ich selbst verwende ~/git, da es kurz und leicht zu schreiben ist, auch wenn es potenziell verwirrend ist, da jedes Unterverzeichnis ein eigenes Git-Repository verwendet.
Beispielcode
Für alle, die mit Beispielcode arbeiten möchten, gibt es auf GitHub eine Erweiterung namens mod_debugme. Wie der Name schon andeutet, handelt es sich um ein Modul mit einigen Fehlern. Zusätzlich zum Modulcode gibt es eine build.xml-Datei, die eine Möglichkeit zeigt, den Build-Prozess für Tests und das Erstellen einer ZIP-Datei zu automatisieren.
Das Modul ist dafür konzipiert, die nächsten paar (standardmäßig 3) Ereignisse (Geburtstage) aus einer in einer Datenbanktabelle gespeicherten Liste anzuzeigen. Man könnte sich vorstellen, dass dies auf einer Büro- oder Familien-Website in Erwartung von Kuchen verwendet wird.
Am besten beginnt man mit Git-Befehlen über die Befehlszeile. Zunächst ein Verzeichnis für den Code erstellen und dann das entfernte Repository klonen:
mkdir ~/git
cd ~/git
git clone https://github.com/ceford/j4xdemos-mod-debugme
Die Antwort sollte nur wenige Sekunden dauern:
Cloning into 'j4xdemos-mod-debugme'...
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (23/23), done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 23 (delta 3), reused 23 (delta 3), pack-reused 0
Unpacking objects: 100% (23/23), done.
Sie sollten sich einen Moment Zeit nehmen, um den Inhalt des Verzeichnisses anzusehen:
cd j4xdemos-mod-debugme
ls -al
total 16
drwxr-xr-x 6 ceford staff 192 2 Sep 17:48 .
drwxr-xr-x 3 ceford staff 96 2 Sep 17:48 ..
drwxr-xr-x 12 ceford staff 384 2 Sep 17:48 .git
-rw-r--r-- 1 ceford staff 1402 2 Sep 17:48 README.md
-rw-r--r-- 1 ceford staff 927 2 Sep 17:48 build.xml
drwxr-xr-x 8 ceford staff 256 2 Sep 17:48 mod_debugme
Das Verzeichnis .git enthält Informationen über das Repository. Die Datei README.md ist ein Markdown-Dokument, das dieses Repository beschreibt. Die Datei build.xml wird verwendet, um die Erweiterung mit einem externen Tool, Phing – später beschrieben – zu erstellen. Das Verzeichnis mod_debugme enthält den Code der Erweiterung.
Installation in Joomla
Das Erweiterungsverzeichnis komprimieren, um eine installierbare Zip-Datei zu erstellen:
zip -r mod_debugme.zip mod_debugme
Die Zip-Datei kann nun in der Joomla-Seite installiert werden, die zum Testen verwendet wird. Nach der Installation muss ein Site-Modul erstellt und einer Modulposition zugewiesen werden. Da es sich um ein fehlerhaftes Modul handelt, kann es während der Arbeit daran einer Position auf Allen Seiten zugewiesen werden; oder es kann einer Position auf einer einzelnen Seite zugewiesen werden; oder es kann in einem Beitrag positioniert werden, der einen eigenen Menüeintrag besitzt.
Nach der Installation die Zip-Datei löschen.
Debug-Modus aktivieren
In Joomlas globaler Konfiguration System debuggen auf Ja und Fehler berichten auf Maximum setzen.
Beim Öffnen einer Seite, die das fehlerhafte Modul enthält, wird ein Stack-Trace angezeigt, der zeigt, wo ein Fehler ausgelöst wurde.
Manchmal befindet sich der Programmierfehler in der ersten Zeile des Stack-Trace. Andernfalls, falls der Fehler in Bibliothekscode ausgelöst wird, zum Beispiel durch Übergabe ungültiger Daten an eine Datenbankfunktion, kann der Programmierfehler weiter unten in der Liste der Funktionsaufrufe liegen.
Erweiterungsverzeichnis in VS Code öffnen
In VS Code über den Menüeintrag Datei / Verzeichnis öffnen das Verzeichnis suchen und öffnen, das die lokale Kopie des Codes der Erweiterung mod_debugme enthält. Es sollte etwa Folgendes zu sehen sein:
Möglicherweise lässt sich das Problem schon durch Lesen des Codes diagnostizieren. Im Fall des Fehlers Class "DebugHelper" not found wird man feststellen, dass eine use-Anweisung einige Zeilen zuvor auskommentiert wurde. Das Vergessen einer use-Anweisung ist ein häufiger Fehler während der ersten Entwicklungsphase!
Dieses Problem beheben und dann das Modul erneut komprimieren und installieren. Dieser Schritt wird etwas mühsam, wenn mehrere Probleme vorliegen. Hier kommen Build-Werkzeuge ins Spiel.
Phing
Phing ist ein Kommandozeilen-Werkzeug, das für alle Plattformen verfügbar ist und zum Erstellen von Softwarepaketen anhand von Anweisungen verwendet wird, die in einer XML-Datei gespeichert sind, standardmäßig build.xml genannt. Für die Arbeit mit Erweiterungscode kann es für zwei Dinge verwendet werden:
- geänderte Dateien aus dem Quellverzeichnis der Erweiterung an die richtigen Stellen im Webseitenverzeichnis kopieren.
- eine neue ZIP-Datei für Neuinstallationen erzeugen.
Phing herunterladen und installieren. Andere Build-Werkzeuge sind ebenfalls verfügbar! Phing kann im eigenen bin-Verzeichnis oder in einem System-bin-Verzeichnis installiert werden. Der Pfad zum Phing-Code muss notiert werden. In diesem Beispiel lautet er ~/bin/phing-latest.phar. Man kann es über die Kommandozeile ausprobieren, nachdem man in das Verzeichnis mit dem Erweiterungscode gewechselt hat:
cd ~/git/j4xdemos-mod-debugme
php ~/bin/phing-latest.phar
Antwort:
Buildfile: /Users/ceford/git/j4xdemos-mod-debugme/build.xml
mod_debugme > main:
... Alle kopierten Dateien werden hier aufgeführt
[zip] Building zip: /Users/ceford/zips/mod_debugme.zip
BUILD FINISHED
Total time: 0.0863 seconds
Aufgaben in VS Code
Um Phing aus VS Code heraus auszuführen, muss eine Datei tasks.json im Verzeichnis .vscode im Wurzelverzeichnis des Verzeichnisses j4xdemos-mod-debugme erstellt werden. Falls Letzteres nicht existiert, muss es zuerst erstellt werden. Dann die Datei tasks.json erstellen und folgenden Code eingeben:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Build mod_debugme",
"type": "shell",
"command": "php ~/bin/phing-latest.phar",
"windows": {
"command": "php ~/bin/phing-latest.phar"
},
"group": "build",
"presentation": {
"reveal": "always",
"panel": "shared"
}
}
]
}
Windows-Benutzer müssen den Windows-spezifischen Befehl anpassen. Die Erweiterung lässt sich nun über das Menü Terminal / Run Build Task erstellen. Das Ergebnis des Befehls sollte im Terminal-Panel unterhalb des Bearbeitungsbereichs erscheinen.
* Executing task: php ~/bin/phing-latest.phar
Buildfile: /Users/ceford/git/gitdemo/j4xdemos-mod-debugme/build.xml
mod_debugme > main:
[zip] Nothing to do: /Users/ceford/zips/mod_debugme.zip is up to date.
BUILD FINISHED
Total time: 0.1031 seconds
* Terminal will be reused by tasks, press any key to close it.
Es können unverständliche Fehlermeldungen auftreten. Die wahrscheinlichste Ursache sind ungültige Pfade zu Verzeichnissen in der Datei build.xml, oder ein Verzeichnis wurde nicht angelegt. Nur eine weitere Art von Problem, das es zu debuggen gilt!
Debugging
Der erste Fehler sollte sich durch Code-Inspektion beheben lassen. Kompliziertere Probleme erfordern das schrittweise Durchlaufen des Codes mit dem Debugger. Dadurch können Variablen überprüft werden, um zu sehen, ob sie die erwarteten Werte enthalten, zum Beispiel beim Übergeben von Argumenten an Bibliotheksfunktionen.
php.ini-Einstellungen
Um Debugging mit Xdebug einzurichten, müssen einige Einträge am Anfang Ihrer php.ini-Datei vorgenommen werden.
zend_extension="xdebug.so"
xdebug.mode="debug"
xdebug.client_port=9003
xdebug.start_with_request = yes
Nach dem Speichern der Änderungen den Apache-Server neu starten.
Fenster „Website hinzufügen“
Ihr Erweiterungsverzeichnis enthält nur wenige Dateien, die Quellen der in Ihrer Website installierten Dateien. Beim Runtime-Debugging werden Breakpoints in Ihren Site-Dateien gesetzt, daher benötigen Sie Zugriff auf diese Dateien. Das Menü Datei / Ordner zum Arbeitsbereich hinzufügen... könnte verwendet werden, um das Site-Verzeichnis zum Arbeitsbereich hinzuzufügen. Es besteht jedoch eine hohe Wahrscheinlichkeit, dass dabei versehentlich Änderungen an Site-Dateien statt an Quelldateien vorgenommen werden. Daher ist es wahrscheinlich am besten, für das Debugging ein separates VS Code-Fenster zu öffnen.
- Neues Fenster öffnen: Im VS Code-Menü Datei / Neues Fenster wählen und das Verzeichnis mit Ihrer Joomla-Website auswählen.
- Verzeichnis öffnen: Im neu geöffneten Fenster im VS Code-Menü Datei / Ordner öffnen... wählen. Das Website-Verzeichnis suchen und auswählen. In der Primären Seitenleiste sollte nun eine Liste aller Dateien Ihrer Joomla-Website zu sehen sein.
Startkonfiguration
Damit Debugging in VS Code tatsächlich funktioniert, wird eine Startkonfiguration benötigt. Im Stammverzeichnis Ihrer Website ein Verzeichnis namens .vscode (Achtung: führender Punkt) mit einer Datei namens launch.json und folgendem Inhalt erstellen:
{
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"hostname": "0.0.0.0",
"port": 9003,
"stopOnEntry": true,
"pathMappings": {
"/Users/ceford/Sites/j421rc2": "${workspaceFolder}"
}
}
]
}
Daran denken, den pathMappings-Eintrag in diesem Beispiel durch die tatsächlichen pathMappings der eigenen Website zu ersetzen. Der Eintrag stopOnEntry pausiert die Ausführung bei der allerersten Zeile des ausgeführten PHP-Codes.
Debuggen von mod_debugme
Nun ist alles bereit, um die Fehler im installierten Modul zu finden und zu beheben.
- Modulcode finden: Den ersten Fehler in Zeile 16 von JROOT/modules/mod_debugme/mod_debugme.php finden.
- Breakpoint setzen: In den Bereich links neben der Zahl 16 klicken. Beim Darüberfahren erscheint ein blasser roter Punkt, der nach dem Klicken voll rot wird, um anzuzeigen, dass ein Breakpoint gesetzt wurde.
- Debugging starten: Im VS Code-Menü Ausführen / Debugging starten wählen. Im Browser die Website neu laden. Das VS Code-Fenster sollte wieder erscheinen, wobei der Code an der ersten Zeile der index.php-Datei der Site angehalten wird. Oben im Bildschirm befinden sich einige Symbole zur Steuerung des Debugging-Vorgangs. Sie sollten selbsterklärend sein. Falls nicht, in der VS Code-Hilfe / Dokumentation nachschlagen.
- Fortsetzen: Die Schaltfläche „Fortsetzen“ wählen – der Code läuft bis zum ersten Breakpoint weiter. Den Code untersuchen, um das Problem zu erkennen.
- Hover: Beim Darüberfahren über eine Variable, der ein Wert zugewiesen wurde, erscheint ein kleiner Tooltip mit einer Zusammenfassung der Attribute dieser Variable. Für Variablen ohne zugewiesenen Wert gibt es keinen Tooltip.
- Variablen: Die linke Spalte enthält weitere Informationen über den Zustand des Codes am Breakpoint. Es gibt zu viele, um sie hier alle zu behandeln. Bei Bedarf selbst erkunden!
- Debugging stoppen: Es ist wahrscheinlich am besten, das Symbol „Fortsetzen“ zu wählen, andernfalls wird die Webseite leer angezeigt. Alternativ kann die Schaltfläche „Stopp“ oder das Menü Ausführen / Debugging beenden verwendet werden.
Einen Fehler beheben
Wichtig: Den Fehler nicht im Website-Code beheben! Den Fehler im Quellcode beheben!
Den Quellcode korrigieren und anschließend Terminal / Build-Task ausführen... verwenden.
Debugging neu starten.
Tipps
Ein paar nicht ganz offensichtliche Probleme:
- Der erste Fehler wurde behoben, aber es stürzt weiterhin in dieser Zeile ab. In mod_debugme.xml nachsehen, wo der src der namespaced Classes definiert ist. Wenn dies im Quellcode korrigiert wurde, muss entweder die ZIP-Datei neu installiert oder administrator/cache/autoload_psr4.php gelöscht werden. Wenn diese Datei fehlt, erstellt Joomla sie aus den Manifest-Dateien neu. Enthält sie jedoch einen falschen oder fehlenden Eintrag, wird dies erst durch eine Neuinstallation der Erweiterung behoben.
- Manchmal muss ein Breakpoint einige Zeilen vor der Zeile gesetzt werden, in der der Fehler auftritt, besonders wenn Werte überprüft werden sollen, die an Funktionsaufrufe übergeben werden.
- Tabelle xxx.yyy\debugme existiert nicht. Ach ja, der Code zum Erstellen einer Tabelle bei der Installation und zum Entfernen bei der Deinstallation wurde nie geschrieben. Es muss eine SQL-Abfrage in phpMyAdmin mit dem Inhalt der Datei mod\debugme.sql ausgeführt werden. Dabei daran denken, #\ in den Tabellennamen durch das eigene Datenbankpräfix zu ersetzen. Schlägt es weiterhin fehl, den Tabellennamen im Code überprüfen.
Screenshot
Wenn alles behoben ist, könnte Folgendes zu sehen sein:
Cake days?
Referenzen
Aus der Joomla!-Dokumentation: Visual Studio Code behandelt auch die Konfiguration weiterer Werkzeuge, zum Beispiel CodeSniffer und PHPUnit.