Introduction à VSC : Visual Studio Code

Peut-être ne connaissez-vous pas VSC ? Pas de panique, la team Bichon vous le présente.

Visual Studio Code est un éditeur de code libre et gratuit, extensible, développé par Microsoft pour Windows, Linux et macOS.

Il s’agit d’une excellente alternative aux IDE de JetBrains, et à l’IDE Eclipse.

https://fr.wikipedia.org/wiki/Visual_Studio_Code

Si vous ne l’avez pas encore essayé, je vous invite à le télécharger, il vous sera utile pour la suite du tutoriel.

https://code.visualstudio.com/

Activez le debug sur VSC pour votre projet PHP

Installez les extensions VSC nécessaires

Si vous installez pour la première fois VSC alors vous aurez à installer les extensions suivantes.

3 extensions nécessaires :

  • Docker
  • Remote – Containers
  • PHP debug

Et 3 extensions facultatives :

  • PHP extension pack
  • PHP IntelliSense
  • PHP-Autocomplete

Pour installer des extensions vous devez passer par le menu dans la barre de gauche pointé par la petite flèche rouge dans l’image qui suit :

Ajout d’une extension

Vous remarquez également qu’il y a une petite zone de recherche textuelle vous permettant d’appliquer un filtre de recherche.

Attachez votre Visual Studio Code au conteneur docker

Ouvrez le dossier contenant les source de votre projet :

Ensuite, cliquez sur la zone verte en bas à gauche de l’éditeur (cette petite zone verte est disponible car vous avez préalablement installé dans votre VSC l’extension Remote – Containers) :

Un menu déroulant s’ouvre, cliquez sur « Remote-Containers: Attach to Running Container… »

Puis sélectionnez le conteneur devcontainer_dockerltb_1 :

Une nouvelle fenêtre Visual Studio Code s’ouvre, vous pouvez fermer la précédente fenêtre. Dans cette nouvelle fenêtre vous allez de nouveau cliquer sur « Open Folder » et sélectionnez le dossier du conteneur qui « mappe » les source de votre projet présent sur votre PC, soit le dossier /var/www/docker-lampx.lateambichon.com/

Open Folder du conteneur

Activez le debug

Dans le menu vertical de gauche vous pouvez observer l’icône « bug ».

Lorsque vous cliquez sur ce menu vous obtenez :

Cliquez sur le lien « create a launch.json file » (sélectionnez Docker – debug in container, dans le menu déroulant qui s’ouvre) et ainsi un onglet launch.json s’ouvre :

Remplacez le contenu du fichier launch.json par celui-ci :

{
    // 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",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

Sauvegardez le fichier.

Vous avez maintenant un bouton de debug qui s’affiche :

Cliquez sur la flèche verte pour démarrer le debug :

Oh my bichon! Une erreur est survenue. Hummm…

Pour lever cette erreur cliquez sur le menu de gauche « Extensions » (icône qui ressemble à un tetris, ou bien Ctrl+Shift+X)

Installez l’extension PHP Debug en cliquant sur le bouton vert « Install in Container lampx:v1.0 »

On peut maintenant poser des points d’arrêts sur notre page index.php en cliquant en marge du code source (petit point rouge qui s’affiche).

Vous pouvez de nouveau essayer de démarrer le debug :

Cette fois-ci il n’y a pas d’erreur.

Retournez sur votre navigateur internet, et faites un refresh (F5) de l’url http://localhost:7080/ et hop vous allez voir une notification de votre VSC qui écoute en mode debug et lorsque vous afficher votre VSC vous pouvez voir que l’exécution est en pause sur un point d’arrêt.

Vous pouvez remarquer qu’à gauche de votre écran sont affichées les variables locales et « super globales ». Dans la zone WATCH vous pouvez ajouter des expressions.

ça y est ! Vous avez la classe du bichon !!! 😉

<<<< Retour à la partie 3/5

Aller sur la partie 5/5 >>>>

Partager sur les réseaux