User Documentation
Herunterladen
Starten

Visual Studio Code Extras

Einführung

Visual Studio Code ist ein von Microsoft entwickelter Quellcode-Editor für Windows, Linux und macOS (einschließlich M1 Macs). Er bietet Unterstützung für Debugging, integrierte Git-Steuerung und GitHub, Syntaxhervorhebung, intelligente Codevervollständigung, Codeschnipsel und Code-Refactoring.

Das Hauptmerkmal des Editors ist, dass er erweiterbar ist und eine riesige Sammlung von Erweiterungen bietet, die von Benutzern und von Microsoft selbst gepflegt werden.

Als allgemeine Einführung dient diese Präsentation zum Thema Joomla Development with Visual Studio Code (PDF, 1Mb), von René Kreijveld, Joomla-Entwickler bei Destiny B.V. Joomla User Group London, 16. März 2021.

Auf dieser Seite wird eine Liste empfohlener Erweiterungen beschrieben, um VSCode für PHP und Joomla zu konfigurieren.

Dies ist eine Liste von Erweiterungen zur Unterstützung von PHP in VSCode:

Das Git-Protokoll wird von VSCode nativ unterstützt. Es gibt jedoch Erweiterungen, um die Code- und Repository-Verwaltung zu verbessern. Dies ist eine Liste von Haupterweiterungen für diese Aufgabe:

Dies ist eine Liste von Erweiterungen zur Unterstützung von Joomla in VSCode:

Dies ist eine Liste von Erweiterungen zur Unterstützung der Remote-SSH-Entwicklung:

  • Remote - SSH ms-vscode-remote.remote-ssh: Die Remote-SSH-Erweiterung ermöglicht es, jeden Remote-Rechner mit einem SSH-Server als Entwicklungsumgebung zu nutzen. Dies kann die Entwicklung und Fehlerbehebung in vielen Situationen erheblich vereinfachen. Für weitere Informationen: Remote-Entwicklung über SSH
  • Live Share MS-vsliveshare.vsliveshare: Visual Studio Live Share ermöglicht es, in Echtzeit gemeinsam mit anderen zu bearbeiten und zu debuggen, unabhängig davon, welche Programmiersprachen oder App-Typen verwendet werden. Damit lässt sich das aktuelle Projekt sofort (und sicher) teilen und bei Bedarf Debugging-Sitzungen, Terminalinstanzen, localhost-Webanwendungen, Sprachanrufe und mehr freigeben!

Dies ist eine Liste praktischer Erweiterungen, die zur Erleichterung der Entwicklung sehr empfohlen werden:

  • EditorConfig for VS Code editorconfig.editorconfig EditorConfig-Unterstützung für Visual Studio Code
  • change-case wmaurer.change-case: Schnelles Ändern der Schreibweise (camelCase, CONSTANT_CASE, snake_case usw.) der aktuellen Auswahl oder des aktuellen Worts
  • Project Manager alefragnani.project-manager: Es hilft dabei, einfach auf Projekte zuzugreifen, egal wo sie sich befinden. Wichtige Projekte gehen damit nicht mehr verloren.

PHP Debug Konfiguration

Die Erweiterung unterstützt die gängigsten Konfigurationen von PHP XDebug. Sie integriert alle VSCode-Funktionen vollständig, um PHP-Skripte zu debuggen.

Um die Erweiterung zu konfigurieren, die offizielle Dokumentation besuchen

Als Beispielkonfiguration für das Debuggen mit VSCode, ist dies eine gängige launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",

            // Server Remote XDebug Port - 9000 is the default XDebug port
            "port": 9000,

            // Server Remote Path -> Local Project Path
            "pathMappings": {
                "/app/www": "${workspaceRoot}/www"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",

            // Local XDebug Port - 9000 is the default XDebug port
            "port": 9000
        }
    ]
}

In Bezug auf die launch.json-Konfiguration, die felixfbecker/vscode-php-debug benötigt, geht es dabei um die Konfiguration von PHP XDebug selbst.

Zu diesem Zeitpunkt könnte die Entwicklungsumgebung xdebug-2 oder xdebug-3 verwenden. Sie unterscheiden sich in den erforderlichen Parametern. Um PHP XDebug zu konfigurieren, sind dies die gängigsten Einstellungen für php.ini.

XDebug 2 Konfiguration

[XDebug]
;;;;;;;;;;;;;;;;;;;
; xdebug-2.9.8
;;;;;;;;;;;;;;;;;;;
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
; xdebug.remote_port = 9000

XDebug 3 Konfiguration

[XDebug]
;;;;;;;;;;;;;;;;;;;
; xdebug-3.0.0
; https://xdebug.org/docs/upgrade_guide
;;;;;;;;;;;;;;;;;;;
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.discover_client_host = true
; xdebug.client_port = 9000

Um mehr darüber zu erfahren, wie XDebug intern funktioniert, um sich mit dem Editor zu verbinden, die [Dokumentation](Xdebug 3 — Documentation) prüfen.

phpcs Konfiguration

Um die Erweiterung zu konfigurieren, die offizielle Dokumentation besuchen. Die Erweiterung unterstützt die gängigsten Konfigurationen von PHP_CodeSniffer.

Standardmäßig wird PHP_CodeSniffer mit mehreren Coding-Standards geliefert. Sobald die Erweiterung installiert ist, funktioniert sie mit PSR2.

    "phpcs.standard": "PSR2",

Um die Erweiterung so zu konfigurieren, dass die Joomla! Coding Standards angewendet werden, die Regeln gemäß der offiziellen Anleitung installieren Sobald die Joomla! Coding Standards installiert sind, die Benutzereinstellungen gemäß dieser Beispielkonfiguration konfigurieren:

    "phpcs.standard": "/home/YOUR-USER/.../Joomla",

Konfiguration von PHP Intelephense

Um die Erweiterung zu konfigurieren, die intelephense-Dokumentation besuchen. Die Erweiterung erfordert keine zusätzliche Konfiguration.

VSCode bietet grundlegende Unterstützung für die PHP-Sprache. Daher ist es wahrscheinlich eine gute Idee, die Standardunterstützung zu deaktivieren, um Konflikte zu vermeiden:

    // Grundlegende Vorschläge deaktivieren
    "php.suggest.basic": false,

    // Um Code-Vorschläge in Kommentaren zu aktivieren
    "editor.quickSuggestions": { "comments": true },

Als Alternative gibt es auch eine sehr beliebte Erweiterung: PHP IntelliSense felixfbecker.php-intellisense für erweiterte Autovervollständigung und Refactoring-Unterstützung für PHP.

PHPUnit Konfiguration

Um die Erweiterung zu konfigurieren, die vscode phpunit Dokumentation besuchen

Die Erweiterung integriert PHP Unit in VSCode, sodass alle Funktionen von PHP Unit in VSCode integriert sind und auch für eine weitere Integration mit der Benutzeroberfläche parametrisiert werden können.

Dies ist eine Beispielkonfiguration der Erweiterung:

    "phpunit.preferRunClassTestOverQuickPickWindow": true,
    "phpunit.driverPriority": [
        "Path",
        "Command",
        "Composer",
        "Phar",
        "Ssh",
        "GlobalPhpUnit"
    ],

php cs fixer Konfiguration (Nur für PSR2)

Um die Erweiterung zu konfigurieren, die vscode php cs fixer Dokumentation besuchen. Die Erweiterung integriert PHP-CS-Fixer in VSCode, sodass alle Funktionen von PHP-CS-Fixer in VSCode integriert sind und auch für eine weitere Integration mit der Benutzeroberfläche parametrisiert werden können.

Um PHP-CS-Fixer automatisch auf PHP-Dateien anzuwenden, die Benutzereinstellungen wie folgt konfigurieren:

    "[php]": {
        "editor.defaultFormatter": "junstyle.php-cs-fixer",
    },
    "php-cs-fixer.onsave": true,

PHP Phan (Analyzer) Konfiguration

Um die Erweiterung zu konfigurieren, die offizielle Dokumentation besuchen. Dies ist eine Beispielkonfiguration der Erweiterung:

    "phan.phpExecutablePath": "/usr/bin/php",
    "phan.analyzedFileExtensions": [
        "php"
    ],

phpmd Konfiguration

Um die Erweiterung zu konfigurieren, die offizielle Dokumentation besuchen. Die Erweiterung erfordert keine zusätzliche Konfiguration.

Dies ist eine Beispielkonfiguration der Erweiterung:

    "phpmd.command": "php /home/YOUR-USER/.../phpmd/phpmd.phar",
    "phpmd.rules": "/home/YOUR-USER/.../phpmd-rulesets/phpmd_config.xml",

EditorConfig for VS Code konfigurieren

EditorConfig ist ein Dateiformat und eine Sammlung von Texteditor-Plugins, um einheitliche Codierungsstile zwischen verschiedenen Editoren und IDEs beizubehalten.

Um den Editor nach den eigenen Vorlieben zu konfigurieren, eine Datei .editorconfig erstellen:

; EditorConfig helps developers define and maintain consistent
; coding styles between different editors and IDEs.

; For more visit http://editorconfig.org.
root = true

; Choose between lf or rf on "end_of_line" property
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null

[*.html]
indent_style = tab

# PSR-2
# [*.php]
# indent_size = 4
# indent_style = space

# Joomla! Coding Standards
[*.php]
indent_size = 4
indent_style = tab

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_style = space
indent_size = 2