Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
visual_studio_code [Le 18/08/2023, 20:01]
86.253.169.11 [Extension "Debbuger for Firefox" - VSCodium]
visual_studio_code [Le 09/09/2024, 12:43] (Version actuelle)
krodelabestiole
Ligne 4: Ligne 4:
 ====== Visual Studio Code ====== ====== Visual Studio Code ======
  
-[[wpfr>​Visual Studio Code]] est un logiciel de développement créé par Microsoft. Il est compatible avec linux, et est publié sous double licence, libre ou propriétaire. La version Microsoft est sous licence propriétaire,​ avec quelques [[https://​vscodium.com/#​why|adjonctions]],​ comme de la télémétrie ou un logo MS.+[[wpfr>​Visual Studio Code]] ​(ou //​VSCode//​) ​est un logiciel de développement créé par Microsoft. Il est compatible avec linux, et est publié sous double licence, libre ou propriétaire. La version Microsoft est sous licence propriétaire,​ avec quelques [[https://​vscodium.com/#​why|adjonctions]],​ comme de la télémétrie ou un logo MS.
  
-La version libre, quasi similaire mais sans [[https://​vscodium.com/#​why|les ajouts de Microsoft]],​ s'​appelle [[https://​vscodium.com/​|VSCodium]].+La version libre, quasi similaire mais sans les [[https://​vscodium.com/#​why|ajouts ​propriétaires et intrusifs ​de Microsoft]],​ s'​appelle [[https://​vscodium.com/​|VSCodium]].
  
 La page ci-dessous vous explique comment installer l'une ou l'​autre version, à votre convenance. La page ci-dessous vous explique comment installer l'une ou l'​autre version, à votre convenance.
Ligne 29: Ligne 29:
 La clé PGP et le PPA peuvent être ajoutés comme suit : La clé PGP et le PPA peuvent être ajoutés comme suit :
  
-<​code>​+<​code ​bash>
 curl https://​packages.microsoft.com/​keys/​microsoft.asc | gpg --dearmor > packages.microsoft.gpg curl https://​packages.microsoft.com/​keys/​microsoft.asc | gpg --dearmor > packages.microsoft.gpg
 sudo install -o root -g root -m 644 packages.microsoft.gpg /​usr/​share/​keyrings/​ sudo install -o root -g root -m 644 packages.microsoft.gpg /​usr/​share/​keyrings/​
Ligne 35: Ligne 35:
 </​code>​ </​code>​
 Puis mettez à jour la liste des paquets et installez vscode : Puis mettez à jour la liste des paquets et installez vscode :
-<​code>​+<​code ​bash>
 sudo apt install apt-transport-https sudo apt install apt-transport-https
 sudo apt update sudo apt update
-sudo apt install code # or code-insiders+sudo apt install code # ou code-insiders
 </​code>​ </​code>​
  
Ligne 47: Ligne 47:
 sudo snap install code --classic sudo snap install code --classic
 </​code>​ </​code>​
- 
  
 ==== Installation (VSCodium) ==== ==== Installation (VSCodium) ====
Ligne 60: Ligne 59:
 Vous pouvez aussi l'​installer directement à partir de dépôt du projet codium : Vous pouvez aussi l'​installer directement à partir de dépôt du projet codium :
  
-<​code>​+<​code ​bash>
 # Téléchargement&​import de la clé GPG # Téléchargement&​import de la clé GPG
 wget -qO - https://​gitlab.com/​paulcarroty/​vscodium-deb-rpm-repo/​raw/​master/​pub.gpg | gpg --dearmor | sudo dd of=/​etc/​apt/​trusted.gpg.d/​vscodium-archive-keyring.gpg wget -qO - https://​gitlab.com/​paulcarroty/​vscodium-deb-rpm-repo/​raw/​master/​pub.gpg | gpg --dearmor | sudo dd of=/​etc/​apt/​trusted.gpg.d/​vscodium-archive-keyring.gpg
Ligne 83: Ligne 82:
  
 ===== Extensions ===== ===== Extensions =====
 +
 ==== Remplacer le dépôt d'​extensions de VSCodium (Open VSX Registry) par celui de Visual Studio Code ==== ==== Remplacer le dépôt d'​extensions de VSCodium (Open VSX Registry) par celui de Visual Studio Code ====
  
Ligne 89: Ligne 89:
 <note tip>Vous pouvez voir toutes les extensions de Visual Studio Code sur le [[https://​marketplace.visualstudio.com/​|Visual Studio Marketplace]],​ et celles de VSCodium sous l'​[[https://​open-vsx.org/​|Open VSX Registry]] ou directement depuis Visual Studio Code/​VSCodium avec le raccourcis clavier CTRL + SHIFT + X</​note>​ <note tip>Vous pouvez voir toutes les extensions de Visual Studio Code sur le [[https://​marketplace.visualstudio.com/​|Visual Studio Marketplace]],​ et celles de VSCodium sous l'​[[https://​open-vsx.org/​|Open VSX Registry]] ou directement depuis Visual Studio Code/​VSCodium avec le raccourcis clavier CTRL + SHIFT + X</​note>​
  
-Il est possible de remplacer le dépôt d'​extensions de VSCodium (Open VSX Registry) par celui de Visual Studio Code (Visual Studio Marketplace). Il faut pour cela modifier le fichier ​''​product.json''​. Si vous avez installé VSCodium via [[:APT]], celui-ci se trouve à l'​emplacement ​''/​usr/share/codium/​resources/​app/​product.json''​.\\  +Il est possible de remplacer le dépôt d'​extensions de VSCodium (Open VSX Registry) par celui de Visual Studio Code (Visual Studio Marketplace). Il faut pour cela spécifier des variables d'environnementUne manière simple de les définir pour tous les utilisateurs est de [[:tutoriel:​comment_modifier_un_fichier|créer un fichier]] ''/​etc/environment.d/50vscodium-marketplace.conf'' ​(avec les [[:​sudo|droits d'​administration]]) contenant le texte suivant ​
-Il faut remplacer la section ''​extensionsGallery''​ par les lignes suivantes ​+<​file ​conf 50vscodium-marketplace.conf>VSCODE_GALLERY_SERVICE_URL='​https://​marketplace.visualstudio.com/​_apis/​public/​gallery' 
-<​file ​json product.json>"​extensionsGallery":​ { +VSCODE_GALLERY_ITEM_URL='​https://​marketplace.visualstudio.com/​items' 
-    "​serviceUrl":​ "https://​marketplace.visualstudio.com/​_apis/​public/​gallery", +VSCODE_GALLERY_CACHE_URL='​https://​vscode.blob.core.windows.net/​gallery/​index'​ 
-    "​itemUrl":​ "https://​marketplace.visualstudio.com/​items" +VSCODE_GALLERY_CONTROL_URL=''​</​file>​
-}</​file>​+
  
-Attention cependant, ces modifications risquent d'​être écrasées ​à chaque mise à jour du logiciel !+Voir à ce sujet la [[https://​github.com/​VSCodium/​vscodium/​blob/​master/​DOCS.md#​extensions-marketplace|documentation officielle en anglais]].
  
 ==== Extension "​Debbuger for Firefox"​ - VSCodium ==== ==== Extension "​Debbuger for Firefox"​ - VSCodium ====
  
-Pour faire fonctionner l'​extension "​Debbuger for Firefox"​ en local avec VSCodium, il faut créer dans le dossier des programmes, un dossier .vscode. On crée ensuite un fichier que l'on nomme "launch.json"Puis on l'​enregistre ​dans le dossier .vscode+Pour faire fonctionner l'​extension "​Debbuger for Firefox"​ en local avec VSCodium, il faut:  
 +  - créer dans le dossier des programmes, un dossier ​caché **.vscode** 
 +  - créer ​ensuite un fichier que l'on nomme **launch.json** (voir ci-dessous). 
 +  - enregistrer ce fichier ​dans le dossier ​**.vscode**.
 <​code>​ <​code>​
 { {
Ligne 123: Ligne 124:
 => clic droit sur la page de Firefox -> Inspecter. ​ => clic droit sur la page de Firefox -> Inspecter. ​
  
 +==== Déboguer avec Xdebug ​ et VSCodium (ou VSCode) ====
 +
 +**Xdebug** permet de déboguer des fichiers php avec VSCodium ou VSCode. ​  
 +
 +=== Débogage depuis un serveur web local ===
 +
 +Pour un débogage depuis le serveur, tout est expliqué dans cette vidéo((voir [[https://​www.youtube.com/​watch?​v=MmyxWy8jl7U|cette vidéo]])) ((d'​après [[https://​forum.ubuntu-fr.org/​viewtopic.php?​id=2082060|ce sujet]] sur le forum))
 +Par contre, dans la vidéo, il ne respecte pas les droits/​propriétés des fichiers/​dossiers dans le dossier /var/www (voir le paragraphe "10.1 permissions"​ de la page [[:​apache2]] ). Et cette version ne permet que déboguer depuis le serveur local.
 +
 +=== Débogage sans seveur ou depuis un serveur web local - un seul fichier de configuration ===
 +
 +1 - Installer xdebug ​
 +Installer Xdebug:
 +<​file>​ sudo apt install php-xdebug </​file>​
 +Vérifier la bonne installation:​
 +<​file>​php -v</​file>​
 +donne:
 +<​file>​gerard@gerard-ThinkCentre-M700:​~$ php -v permet de voir si Xdebug est installé.
 +PHP 8.1.2-1ubuntu2.14 (cli) (built: Aug 18 2023 11:41:11) (NTS)
 +Copyright (c) The PHP Group
 +Zend Engine v4.1.2, Copyright (c) Zend Technologies
 +    with Zend OPcache v8.1.2-1ubuntu2.14,​ Copyright (c), by Zend Technologies
 +    with Xdebug v3.1.2, Copyright (c) 2002-2021, by Derick Rethans
 +gerard@gerard-ThinkCentre-M700:​~$ ​
 +</​file>​
 +
 +On peut utiliser deux fichiers pour la configuration de Xdebug. Le premier pour une session "​CLI"​ ( interface de ligne de commande - sans serveur) le deuxième pour le serveur web local: \\
 +* /​etc/​php/​8.1/​cli/​conf.d/​20-xdebug.ini \\
 +* /​etc/​php/​8.1/​apache2/​conf.d/​20-xdebug.ini \\
 +
 +2 - On va effacer ces deux fichiers et créer des liens symboliques vers le fichier ou se trouvera la configuration de xdebug. Un appel de/​etc/​php/​8.1/​cli/​conf.d/​20-xdebug.ini ou de /​etc/​php/​8.1/​apache2/​conf.d/​20-xdebug.ini nous ramènera vers le fichiers de configuration (/​etc/​php/​8.1/​mods-available/​xdebug.ini).Cela permet de n'​avoir qu'un seul fichier de configuration.
 +
 +Effacer ​ /​etc/​php/​8.1/​cli/​conf.d/​20-xdebug.ini:​
 +<​file>​sudo rm /​etc/​php/​8.1/​cli/​conf.d/​20-xdebug.ini</​file>​
 +Effacer /​etc/​php/​8.1/​apache2/​conf.d/​20-xdebug.ini:​
 +<​file>​sudo rm /​etc/​php/​8.1/​apache2/​conf.d/​20-xdebug.ini</​file>​
 +
 +3 - Créer le premier lien symbolique:
 +<​file>​sudo ln -s /​etc/​php/​8.1/​mods-available/​xdebug.ini /​etc/​php/​8.1/​cli/​conf.d/​20-xdebug.ini</​file>​
 +Puis le deuxième lien symbolique:
 +<​file>​sudo ln -s /​etc/​php/​8.1/​mods-available/​xdebug.ini /​etc/​php/​8.1/​apache2/​conf.d/​20-xdebug.ini</​file>​
 +
 +4 - Puis configurer l'​unique fichier de configuration /​etc/​php/​8.1/​mods-available/​xdebug.ini:​
 +<​file>​zend_extension=xdebug.so
 +xdebug.mode = develop, debug
 +xdebug.start_with_request = yes
 +xdebug.log = /​tmp/​xdebug.log
 +xdebug.client_host = localhost
 +xdebug.client_port = 9003</​file>​
 +
 +5 - Redémarrer apache2:
 +<​file>​sudo systemctl restart apache2</​file>​
 +
 +6 - Créer un fichier phpinfo.php dans lequel, on met:
 +<​file><?​php
 +phpinfo();</​file>​
 +On place ce fichier sur le serveur local dans le dossier /​var/​www/​html et on lance l'url [[http://​localhost/​phpinfo.php]] du fichier avec un navigateur web.
 +Vérifier la bonne installation de Xdebug:
 +<​file>​This program makes use of the Zend Scripting Language Engine:
 +Zend Engine v4.1.2, Copyright (c) Zend Technologies
 +    with Zend OPcache v8.1.2-1ubuntu2.14,​ Copyright (c), by Zend Technologies
 +    with Xdebug v3.1.2, Copyright (c) 2002-2021, by Derick Rethans</​file>​
 +Il existe un paragraphe concernant Xdebug sur cette page ou on peut créer un fichier xdebug_infos.php dans lequel il faut insérer
 +<​file><?​php ​
 +xdebug_info();</​file>​
 +On doit également placer ce fichier dans le dossier /​var/​www/​html \\ 
 +on lance le fichier avec l'URL [[http://​localhost/​xdebug_info.php]]
 +On y retrouve les paramètres de réglage que l'on a effectué dans le fichier /​etc/​php/​8.1/​mods-available/​xdebug.ini
 +
 +=== Comment déboguer? ===
 +
 +Xdedug fonctionne de deux manières:
 +
 +1 - avec une session CLI (sans serveur et sans fichier de configuration launch.json):​ \\
 +- Ouvrir votre fichier avec VSCode \\
 +- Mettre des points d'​arrêt \\
 +- Lancer l'​application avec l'​option "Start Debugging"​. Le de débogueur devient opérationnel \\
 +
 +2 - avec un serveur local: \\
 +- Ouvrir votre fichier avec VSCode \\
 +- Créer un fichier launch.json file (section "run and debbug"​ dans la partie gauche de l'​interface) \\
 +- Créer ​ un(des) breakpoint(s) \\
 +- Démarrer l'​application avec l'​option "Start Debugging"​.\\
 +-  Lancer l'​application avec un navigateur internet (localhost/​my-progam.php).Le débogueur démarre.
 +
 +3 - avec le serveur web interne PHP: 
 +- Lancer le serveur PHP sur le port 8082 (par exemple) en local:
 +<​file>​ php -S localhost:​8082</​file>​
 +- Créer un fichier launch.json file si besoin (section "run and debbug"​ dans la partie gauche de l'​interface) \\
 +- Démarrer l'​application avec l'​option "Start Debugging"​.\\
 +- Lancer une requête HTTP avec le logiciel POSTMAN (par exemple) ou depuis un navigateur internet pour une requête GET.\\
 +- Le débogueur devrait démarrer aussitôt. ​
 +
 +==== Serveurs web internes ====
 +
 +=== Serveur web interne PHP ===
 +
 +PHP dispose d'un serveur web interne. Voici un exemple de démarrage!
 +<​file>​php -S localhost:​8000</​file>​
 +
 +=== Extension Live Server===
 +
 +Pour tester rapidement les fichiers [[:PHP]] sans avoir à passer par le serveur [[:LAMP]], on peut installer l'​extension "Live Server"​ depuis VSCode ou VSCodium.
 +Configuration:​
 +(//File// -> //​Preferences//​ -> //​Settings//,​ puis on tape ''​Live Server''​ dans la barre de recherche):
 +  - Executable : ''/​usr/​bin/​php''​
 +  - PHP.ini : ''/​etc/​php/​8.1/​apache2/​conf.d/​20-xdebug.ini''​ (à adapter, éventuellement)
 +  - Port : ''​9300''​
  
 ===== Désinstallation ===== ===== Désinstallation =====
  • visual_studio_code.1692381709.txt.gz
  • Dernière modification: Le 18/08/2023, 20:01
  • par 86.253.169.11