User Documentation
Télécharger
Lancer

Compléments pour Visual Studio Code

Introduction

Visual Studio Code est un éditeur de code source développé par Microsoft pour Windows, Linux et macOS (y compris les Mac M1). Il inclut la prise en charge du débogage, un contrôle Git intégré et GitHub, la coloration syntaxique, la complétion intelligente de code, les extraits de code et la refactorisation de code.

La principale caractéristique de l'éditeur est qu'il est extensible et dispose d'une vaste collection d'extensions maintenues par les utilisateurs et par Microsoft lui-même.

À titre d'introduction générale, voici une présentation sur le sujet Joomla Development with Visual Studio Code (PDF, 1Mo), par René Kreijveld, développeur Joomla chez Destiny B.V., Joomla User Group Londres, 16 mars 2021.

Sur cette page, nous détaillons une liste d'extensions recommandées pour configurer VSCode afin de prendre en charge PHP et Joomla!.

Voici une liste d'extensions pour la prise en charge de PHP sur VSCode :

Le protocole Git est pris en charge nativement par VSCode. Cependant, il existe des extensions pour améliorer la gestion du code et des dépôts. Voici une liste d'extensions épinglées pour cette tâche :

Voici une liste d'extensions pour prendre en charge Joomla! sur VSCode :

Voici une liste d'extensions pour prendre en charge le développement distant via SSH :

  • Remote - SSH ms-vscode-remote.remote-ssh : L'extension Remote - SSH vous permet d'utiliser n'importe quelle machine distante disposant d'un serveur SSH comme environnement de développement. Cela peut grandement simplifier le développement et le dépannage dans de nombreuses situations. Pour plus d'informations : Développement distant via SSH
  • Live Share MS-vsliveshare.vsliveshare : Visual Studio Live Share vous permet d'éditer et de déboguer de manière collaborative avec d'autres personnes en temps réel, quel que soit le langage de programmation utilisé ou le type d'application développée. Il vous permet de partager instantanément (et de manière sécurisée) votre projet actuel, puis, selon les besoins, de partager des sessions de débogage, des instances de terminal, des applications web en localhost, des appels vocaux, et plus encore !

Voici une liste d'extensions pratiques fortement recommandées pour faciliter le développement :

  • EditorConfig for VS Code editorconfig.editorconfig Support d'EditorConfig pour Visual Studio Code
  • change-case wmaurer.change-case : Change rapidement la casse (camelCase, CONSTANT_CASE, snake_case, etc.) de la sélection actuelle ou du mot actuel
  • Project Manager alefragnani.project-manager : Il vous aide à accéder facilement à vos projets, peu importe où ils se trouvent. Ne manquez plus ces projets importants.

Configuration du débogage PHP

L'extension prend en charge les configurations les plus courantes de XDebug pour PHP. Elle intègre pleinement toutes les fonctionnalités de VSCode pour déboguer des scripts PHP.

Pour configurer l'extension, consultez la documentation officielle

Comme exemple de configuration pour le débogage avec VSCode, voici un launch.json courant :

{
    // 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
        }
    ]
}

En lien avec la configuration du launch.json que requiert felixfbecker/vscode-php-debug, voici la configuration de PHP XDebug lui-même.

À l'heure actuelle, votre environnement de développement peut avoir xdebug-2 ou xdebug-3. Ils diffèrent au niveau des paramètres requis. Pour configurer PHP XDebug, voici les réglages les plus courants pour php.ini.

Configuration de XDebug 2

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

Configuration de XDebug 3

[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

Pour en savoir plus sur le fonctionnement interne de XDebug pour se connecter à l'éditeur, consultez la [documentation](Xdebug 3 — Documentation).

Configuration de phpcs

Pour configurer l'extension, consultez la documentation officielle. L'extension prend en charge les configurations les plus courantes de PHP_CodeSniffer.

Par défaut, PHP_CodeSniffer est livré avec plusieurs normes de codage. Une fois l'extension installée, elle fonctionne avec PSR2.

    "phpcs.standard": "PSR2",

Pour configurer l'extension afin d'appliquer les Normes de codage Joomla!, installez les règles en suivant le guide officiel. Une fois les Normes de codage Joomla! installées, configurez les paramètres utilisateur en suivant cet exemple de configuration :

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

Configuration de PHP Intelephense

Pour configurer l'extension, consultez la documentation d'intelephense. L'extension ne nécessite pas de configuration supplémentaire.

VSCode est livré avec une prise en charge basique du langage PHP. Il est donc probablement judicieux de désactiver la prise en charge par défaut pour éviter les conflits :

    // Disable basic suggestions
    "php.suggest.basic": false,

    // To activate code suggestions in comments
    "editor.quickSuggestions": { "comments": true },

Comme alternative, il existe également une extension très populaire : PHP IntelliSense felixfbecker.php-intellisense Autocomplétion avancée et support du refactoring pour PHP.

Configuration de PHPUnit

Pour configurer l'extension, consultez la documentation vscode phpunit

L'extension intègre PHP Unit avec VSCode, de sorte que toutes les fonctionnalités de PHP Unit sont intégrées à VSCode et peuvent également être paramétrées pour une intégration plus poussée avec l'interface utilisateur.

Voici un exemple de configuration de l'extension :

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

Configuration de php cs fixer (Uniquement pour PSR2)

Pour configurer l'extension, consultez la documentation vscode php cs fixer. L'extension intègre PHP-CS-Fixer avec VSCode, de sorte que toutes les fonctionnalités de PHP-CS-Fixer sont intégrées à VSCode et peuvent également être paramétrées pour une intégration plus poussée avec l'interface utilisateur.

Pour appliquer automatiquement PHP-CS-Fixer aux fichiers PHP, configurez les paramètres utilisateur de cette façon :

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

Configuration de PHP Phan (Analyzer)

Pour configurer l'extension, consultez la documentation officielle. Voici un exemple de configuration de l'extension :

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

Configuration de phpmd

Pour configurer l'extension, consultez la documentation officielle. L'extension ne nécessite pas de configuration supplémentaire.

Voici un exemple de configuration de l'extension :

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

Configuration d'EditorConfig pour VS Code

EditorConfig est un format de fichier et un ensemble de plugins pour éditeurs de texte permettant de maintenir des styles de codage cohérents entre différents éditeurs et IDE.

Pour configurer l'éditeur selon vos préférences, créez un fichier .editorconfig :

; 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