Schlagwort-Archive: VS Code Editor

Visual Studio Code ist ein freier Quelltext-Editor von Microsoft. Visual Studio Code ist für die Betriebssysteme Windows, macOS und Linux verfügbar.

Ordner in VS Code öffnen

Projekt Ordner in VS Code mit Kontextmenü öffnen

Der Lightweight Editor VS Code, ist ein cross-platform Editor für Entwickler dieser sich von integrierten Entwicklungsumgebungen (IDE) unterscheidet. Wie Sublime, Atome oder Eclipse, kennt Visual Studio Code dennoch mit IntelliSense die automatische Vervollständigung. Bei der Bearbeitung von Quellcode und weist ein Debugger auf. Beinhaltet jedoch keine integrierten Compiler und Komponenten wie eine Versionsverwaltung, Projektmanagement, oder die Möglichkeit der einfachen Erstellung von grafischen Benutzeroberflächen (GUI).

Ordner in VS Code aus Explorer öffnen

Entwickelt man mit VS Code, wird auch hier ein Projekt Ordner angelegt. Dies kann aus dem in VS Code integrierten Explorer getätigt werden. VS Code speichert die Arbeitsbereich Einstellungen in der Datei settings.json. Die Einstellung für den Debugger in launch.json unter dem Ordner .vscode des jeweiligen Projekt Ordners.

Damit beim öffnen sämtliche Einstellungen zum Projekt geladen werden, kann die VS Code Entwicklungsumgebungen im jeweiligen Projekt Ordner mit der Eingabe von Code .geöffnet werden, damit nicht jedesmal erst die Eingabeaufforderung geöffnet werden muss, kann folgender Registry Key eingetragen werden, hierdurch wird VS Code mit den Einstellungen des Projektes aus dem Windows Explorer geöffnet.

Bei der Installation von VS Code wird das Kontextmenü automatisch erweitert, damit ein Projekt Ordner aus dem Explorer in VS Code geöffnet werden kann. Aus nicht näher bekannten gründen verschwindet die Option im Kontextmenü leider plözlichen. In diesem Beitrag wird gezeigt, wie das Kontextmenü für VS Code erweitert wird.

Registry Schlüssel für Explorer Kontextmenü

REG ADD HKCR\Directory\shell\Code /ve /t REG_SZ /d "Öffnen" /f
REG ADD HKCR\Directory\shell\Code\command /ve /t REG_SZ /d "%localappdata%\Programs\Microsoft VS Code\Code.exe \"%V\"" /f
REG ADD HKCR\Directory\shell\Code /v Icon /t REG_SZ /d "%localappdata%\Programs\Microsoft VS Code\Code.exe" /f

Die REG Zeilen mit  Copy Paste in als Administrator geöffnete Eingabeaufforderung einfügen.

  Möglicherweise ist VS-Code unter einem anderen Pfad installiert. Stelle sicher, in welchem Pfad code.exe installiert ist, und ändere ggf. den Pfad in den letzten beiden Zeilen.

Nachfolgende REG-Zeilen ausführen, wenn VS Code nicht unter %localappdata%\Programs installiert ist, sondern unter Program Files.

REG ADD HKCR\Directory\shell\Code /ve /t REG_SZ /d "Öffnen" /f
REG ADD HKCR\Directory\shell\Code\command /ve /t REG_SZ /d "C:\Program Files\Microsoft VS Code\Code.exe \"%V\"" /f
REG ADD HKCR\Directory\shell\Code /v Icon /t REG_SZ /d "C:\Program Files\Microsoft VS Code\Code.exe" /f

Die REG Zeilen mit  Copy Paste in als Administrator geöffnete Eingabeaufforderung einfügen.

Das neue Kontextmenü Code „Öffnen“ ist registriert.

Projekt Ordner in VS Code mit Kontextmenü öffnen

Mit einem Rechtsklick erscheint das Kontextmenu Code mit dem blauen Symbol, wähle „Öffnen“ über dem gewählten Ordner.

Hinweis. Bei Windows 11 muss man nach Rechtsklick auf „Weitere Optionen anzeigen“ gehen.

PHP entwickeln mit Windows und Visual Studio Code

Der bei Windows 10 verfügbare Web-Server kann nicht nur statische HTML Seiten oder ASP-Code ausführen, er unterstützt auch PHP-Anwendungen. Einzig die Open-Source PHP-Binaries müssen separat heruntergeladen und installiert werden.

IIS Web-Server bereitstellen
PHP Windows Binaries Installation
Der Lightweight Code Editor
Debugging mit VS Code

Wer dynamische PHP Web-Seiten entwickeln möchte, benötigt hierfür nicht mehr den kompletten LAMP-Stack, wie beispielsweise in einer Linux Virtual Machine oder einer Windows-Implementierung wie XAMPP. Die beim IIS installierten PHP-Module und SQL-Server-Express erfüllen den Zweck oft auch. Falls es doch eine LAMP Umgebung sein muss, steht das Windows-Subsystem für Linux zur Verfügung, hierzu das einrichten von bash on Windows ebenfalls hier in diesem Blog.

IIS Web-Server bereitstellen

Die erforderlichen Internetinformationsdienste (IIS) werden wie folgt installiert, auf Systemsteuerung unter Programme => Programme und Features => Windows-Features aktivieren oder deaktivieren.

internetinformationsdienste
Internetinformationsdienste

Die erforderlichen Berechtigungen für den Ordner wwwroot sollten für Benutzer erteilt werden, diese später php-Dateien erstellen und bearbeiten sollen. Dies aus dem IIS-Manger (Inetmgr) oder Explorer => Eigenschaften => Sicherheit, Benutzer hinzufügen und Vollzugriff geben.

PHP Windows Binaries Installation

Nun besorgt man sich das passende PHP-Modul, das man von php.net herunterladen kann. Dort wählt man die gewünschte Version aus, dabei muss man sich zwischen der x86- und x64-Architektur entscheiden.

PHP Download: https://windows.php.net/download

Die PHP-Module liegen in einer Thread-Safe- und einer Non-Thread-Safe-Ausführung vor. Die IIS benötigen die Thread-Safe-Variante nicht.

Nach dem Download des ZIP-Archivs entpackt man dieses und kopiert den Inhalt in ein Verzeichnis, zum Beispiel unter C:\PHP. Danach lässt sich PHP einfach über den IIS Manager einbinden.

Mit Win+R und der Eingabe inetmgr wird der Internetinformationsdienste (IIS)-Manager gestartet.

Internetinformationsdienste (IIS)-Manager
Internetinformationsdienste (IIS)-Manager

Ein Doppel-Klick auf Handlerzuordnungen und rechts im Fenster Aktionen auf Modulzuordnung hinzufügen klicken.

Die folgenden Werte eintragen um den CGI-PHP Handler zu erstellen.

Modulzuordnung hinzufuegen
Modulzuordnung hinzufügen

Nach dem Speichern der eingegebenen Daten ist ein Neustart des Web-Servers erforderlich. Dies kann man im IIS Manager im Abschnitt Aktionen veranlassen.

Den Suchpfad für C:\PHP erstellt man unter Systemsteuerung\System und Sicherheit\System  => Erweiterte Systemeinstellungen unten auf den Button Umgebungsvariablen klicken.

Umgebungsvariable bearbeiten
Umgebungsvariable bearbeiten

Um zu prüfen ob IIS nun tatsächlich PHP-Skripte ausführen kann, erstellt man eine Datei mit dem Inhalt:

<?php phpinfo(); ?>

und kopiert diese unter dem Dateiname phpinfo.php in das webroot-Verzeichnis (C:\inetpub\wwwroot). Ruft man nun phpinfo über die entsprechende URL im Browser (https://localhost/phpinfo.php) auf, sollten detaillierte Informationen über die installierte PHP-Version ausgegeben werden.

Nun können PHP Anwendungen entwickelt und getestet werden, hierbei bietet sich eine grosse Anzahl von Tools und Entwicklungsumgebungen an, geeignet ist hier das Open Source Programm Visual Studio Code. Bis auf den Namen und einigen Funktionen wie IntelliSense hat VS Code nichts mit Visual Studio gemeinsam.

Der Lightweight Code Editor

Im Gegensatz zu Visual Studio von Microsoft ist Visual Studio Code, kurz auch VS Code, ein Quelltext-Editor. Es handelt sich um kein vollwertiges IDE Tool, sondern um ein Text Editor der technologisch auf dem Electron (Framework) basiert, mit einer Reihe von leistungsstarken Funktionen, wie man es auch bei IDE Anwendungen findet, wie IntelliSense, Debugging und Git Source Control Integration. Er dient vorrangig der Entwicklung von Webanwendungen und ermöglicht die Programmierung unter C#, C++, CoffeeScript, CSS, HTML, Java, JSON, Perl, PHP, PowerShell, Python, Ruby und weitere mehr. Unterstützt wird VS Code von zahlreichen Extensions, damit lässt sich der Editor fast beliebig erweitern. VS Code wird hauptsächlich von einem Team in der Schweiz entwickelt, welches von Erich Gamma geleitet wird.

VS Code ist eine Cross-platform für Linux, Mac und Windows,
Download URL https://code.visualstudio.com/download

Im Unterschied zu Visual Studio arbeitet VS Code nicht mit Projektdateien, sondern auf Basis von Codedateien und Ordnern. Nach dem herunterladen und installieren erstellt man sich am besten ein Projekt Ordner, Beispielsweise codes\php hier unter dem Dokumenten Ordner.

Mit code . werden gleich alle Dateien die sich im Ordner befinden in VS Code geladen.

Hier sollen wir die VS Code Konfiguration für PHP erweitern, dies geschieht in dem man auf Datei => Einstellungen => Benutzereinstellungen geht, die Datei settings.json wird geöffnet, im rechten Edit Panel können die default settings überschreiben werden. Bei php.validate.executablePath muss der absolute Pfad zur PHP-Runtime eingetragen werden, hier ist es C:\php\php.exe. Mit Ctrl+S speichert man die Änderungen.

//
// Place your settings in this file to overwrite the default settings
{
    // PHP-Konfigurationsoptionen

    // Gibt an, ob PHP-Überprüfung aktiviert ist.
    "php.validate.enable": true,

    // Zeigt auf die ausführbare PHP-Datei.
    "php.validate.executablePath": "C://php//php.exe",

    // Gibt an, ob der Linter beim Speichern oder bei der Eingabe ausgeführt wird.
    "php.validate.run": "onType",
    "window.zoomLevel": 0
}

Die Konfigurationsdatei: %APPDATA%\Code\User\settings.json

Damit wir php Code Debuggen können braucht es die Xdebug Extension der entsprechenden Version von https://xdebug.org/download.php

Am besten ruft man phpinfo.php aus dem Browser auf, z.B. https://localhost/phpinfo.php und kopiert den Quelltext der Ausgabe von phpinfo in die Box Tailored Installation Instructions. URL https://xdebug.org/wizard.php

Füge die vollständige Ausgabe von phpinfo () ein (Copy & Paste der HTML-Version, oder den HTML-Quelltext) und klicke den Button Analyse my phpinfo() output, um den passenden Download Link und die Installationsanweisungen zu erhalten.

Ausgegeben wird eine Instruktion passend zur eigenen Umgebung, folge der Anweisung.

Wie gezeigt wird die DLL-Datei in den Ext. Ordner unter dem PHP-Runtime Pfad kopiert, nach C:\php\ext\php_xdebug-2.5.0-7.1-vc14-nts-x86_64.dll

Die Datei C:\PHP\php.ini muss noch editiert werden, die folgenden Zeilen werden am ende hinzugefügt.

; End:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

zend_extension = C:\php\ext\php_xdebug-2.5.0-7.1-vc14-nts-x86_64.dll

Nach der Installation der Xdebug Extension wird VS Code gestartet mit  +R und code

Die PHP Debug Extension wird aus dem Visual Studio Marketplace installiert.

Visual Studio Code PHP IntelliSense

Hinzu kommen noch die Extensions Code Runner, PHP Code Format und PHP IntelliSense, diese direkt aus VS Code Extensions mit Ctrl+Shift+X heruntergeladen und installiert werden können, oder mit Ctrl+P : ext install code-runner

Im VS Code Explorer mit dem öffnen einer php Datei kommt man mit F5 in den Debug Modus, diesen wir für PHP wählen.

Im VS Code Explorer mit dem öffnen einer php Datei

Es wird die json-Launcher Konfigurationsdatei geöffnet.

Es wird die json-Launcher Konfigurationsdatei geöffnet.

Der Xdebugger horcht nun auf Port 9000, die Werte können übernommen werden und mit Ctrl+S gespeichert werden. VS Code legt nun in jedem Projekt Ordner ein .vscode Ordner an, in diesem die Datei launch.json angelegt wird.

Wenn man sich jetzt noch Node.js besorgt, ist man mit php nun auch für die Java Syntax Prüfung und das Debugging komplett.

Debugging mit VS Code

Mit F5 wird der Debugger gestartet, hier ein kleiner Java Script, bevor das Debugging nun von statten gehen kann, muss der Launcher launch.json für den Script app.js erstellt werden, hierzu klickt man oben auf das kleine Zahnrädchen, die Datei launch.json wird in den Editor geladen, nun klickt man auf Konfiguration hinzufügen, der neue abschnitt wird übernommen, und unser app.js bei Program hinter {workspaceRoot} hinzugefügt.

Visual Studio Code launch.json
Visual Studio Code launch.json

Der Debug Launcher mit Ctrl+S speichern, die Datei launch.json befindet sich nun im Unterordner .vscode.

Rechts neben der Zeilennummer werden die Breakpoints gesetzt, mit F11 geht es schrittweise zum nächsten Breakpoint.

Visual Studio Code Debugging
Visual Studio Code Debugging

Die sonst blaue Statuszeile ist nun Orange, bezeichnend für den Debug Modus. Die IntelliSense Syntax Referenz wird mit Ctrl+Shift im Code aufgerufen.

VS Code Terminal
VS Code Terminal

Drückt man die Tasten Ctrl+Shift+! öffnet sich ein Terminal Fenster, in diesem mit dem Aufruf von node der Java Script sich ebenfalls ausführen lässt.

Erscheint die Meldung „Zurzeit ist kein Ordner geöffnet“ nach der Tasten Eingabe Ctrl+Shift+D oder mit klick auf das Debug Symol, geht man auf Datei => Ordner öffnen.. und wählt den Ordner mit den Dateien die man debuggen möchte. Nun kann man mit F5 den Debug Mode starten, falls launch.json nocht nicht erstellt wurde, wird diese generiert, die Datei launch.json kann über den VS Code Explorer geöffnet und ggf. angepasst werden. Es wird für jede Code Datei ein Eintrag in launch.json vorgesehen, bei „program“: „${workspaceRoot}/app.js“ wobei app.js die Datei ist die man Debuggen möchte.

CS Code Runner

Drückt man die Tasten Alt+Ctrl+N oder geht über das Kontext Menu Run Code, wird der Script ausgeführt, der Output wird unten ausgegeben.