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 27/06/2020, 18:22]
81.48.135.168 erreur dans la commande d'ajout au sources.list de codium
visual_studio_code [Le 19/03/2024, 23:50] (Version actuelle)
82.66.208.97 [Déboguer avec Xdebug et VSCodium (ou VSCode)]
Ligne 1: Ligne 1:
 {{tag>​ide}} {{tag>​ide}}
----- 
 {{ vscode.png?​80}} {{ vscode.png?​80}}
  
 ====== 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 [[https://​vscodium.com/#​why|les ajouts 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.
 +
 +<​note>​Par défaut, VSCodium ne permet pas d'​accéder au dépôt d'​extensions Visual Studio Marketplace,​ maintenu par Microsoft.
 +
 +Il est cependant possible de [[https://​github.com/​VSCodium/​vscodium/​blob/​master/​DOCS.md#​extensions-marketplace|modifier le fichier product.json]] pour y avoir accès.</​note>​
  
 ===== Installation ===== ===== Installation =====
  
-Cette page vous laisse le choix entre la version Microsoft et VSCodium+Cette page vous laisse le choix entre la version Microsoft et VSCodium.
  
-==== Installation (Version Microsoft) ==== 
  
-=== Via .deb === 
 [[https://​code.visualstudio.com/​download|Allez sur cette page]], et sélectionnez le fichier "deb (Debian, Ubuntu)"​ en 64 ou 32 bits [[ubuntu_64bits#​les_processeurs_compatibles|selon votre ordinateur]]. [[https://​code.visualstudio.com/​download|Allez sur cette page]], et sélectionnez le fichier "deb (Debian, Ubuntu)"​ en 64 ou 32 bits [[ubuntu_64bits#​les_processeurs_compatibles|selon votre ordinateur]].
 Installez le à l'aide de l'​interface graphique (tel que gdebi-gtk) ou en ligne de commande <​code>​ Installez le à l'aide de l'​interface graphique (tel que gdebi-gtk) ou en ligne de commande <​code>​
-sudo dpkg -i code_*.deb +sudo dpkg -i code_*.deb</​code>​ 
-</​code>​ + 
-et vous pourrez ​executer ​Visual Studio Code avec la commande <​code>​code</​code>​+et vous pourrez ​exécuter ​Visual Studio Code avec la commande <​code>​code</​code>​
  
 === Via PPA de Microsoft === === Via PPA de Microsoft ===
 +
 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/​
 sudo sh -c 'echo "deb [arch=amd64 signed-by=/​usr/​share/​keyrings/​packages.microsoft.gpg] https://​packages.microsoft.com/​repos/​vscode stable main" > /​etc/​apt/​sources.list.d/​vscode.list'​ sudo sh -c 'echo "deb [arch=amd64 signed-by=/​usr/​share/​keyrings/​packages.microsoft.gpg] https://​packages.microsoft.com/​repos/​vscode stable main" > /​etc/​apt/​sources.list.d/​vscode.list'​
 </​code>​ </​code>​
-Puis mettez à jouter ​la liste des paquets et installez vscode : +Puis mettez à jour la liste des paquets et installez vscode : 
-<​code>​ +<​code ​bash
-sudo apt-get install apt-transport-https +sudo apt install apt-transport-https 
-sudo apt-get update +sudo apt update 
-sudo apt-get install code # or code-insiders+sudo apt install code # ou code-insiders
 </​code>​ </​code>​
  
 === Via snap === === Via snap ===
 +
 L'​installation via [[snap|snap]] est la plus simple: L'​installation via [[snap|snap]] est la plus simple:
 <​code>​ <​code>​
Ligne 50: Ligne 53:
 Comme indiqué plus haut VSCodium est la version libre de la version Microsoft de Visual Studio Code. Pour l'​installer plutôt que la version Microsoft, il y a plusieurs solutions : Comme indiqué plus haut VSCodium est la version libre de la version Microsoft de Visual Studio Code. Pour l'​installer plutôt que la version Microsoft, il y a plusieurs solutions :
  
-Le plus simple est d'​installer la version [[snap|snap]] des dépôts Ubuntu (il n'y a pas de paquet .deb) : +Le plus simple est d'​installer la version [[snap|snap]] des dépôts Ubuntu (il n'y a pas de paquet .deb) :
 <​code>​ <​code>​
 sudo snap install codium sudo snap install codium
 </​code>​ </​code>​
  
-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 | sudo apt-key add -+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
  
 # Ajout du repository de VSCodium # Ajout du repository de VSCodium
-echo 'deb https://​gitlab.com/​paulcarroty/​vscodium-deb-rpm-repo/raw/repos/debs/ vscodium main' | sudo tee --append ​/​etc/​apt/​sources.list.d/​vscodium.list+echo '​deb ​[signed-by=/​etc/​apt/​trusted.gpg.d/​vscodium-archive-keyring.gpg] ​https://paulcarroty.gitlab.io/​vscodium-deb-rpm-repo/​debs/​ vscodium main' | sudo tee /​etc/​apt/​sources.list.d/​vscodium.list 
 +deb [signed-by=/​etc/​apt/​trusted.gpg.d/​vscodium-archive-keyring.gpg] https://​paulcarroty.gitlab.io/​vscodium-deb-rpm-repo/​debs/​ vscodium main
 sudo apt update sudo apt update
  
Ligne 71: Ligne 75:
  
 Vous pouvez désormais démarrer VSCodium en utilisant la commande <​code>​codium</​code>​ Vous pouvez désormais démarrer VSCodium en utilisant la commande <​code>​codium</​code>​
-Si vous souhaiter utiliser la commande "​code"​ pour le lancer vous pouvez ajouter un lien symbolique:+Si vous souhaiter utiliser la commande "​code"​ pour le lancer vous pouvez ajouter un lien symbolique :
 <​code>​ <​code>​
 sudo ln -s /​usr/​bin/​codium /​usr/​bin/​code sudo ln -s /​usr/​bin/​codium /​usr/​bin/​code
 </​code>​ </​code>​
  
-Vous pouvez désormais ​demarrer ​VSCodium avec les commandes "​code"​ ou "​codium"​+Vous pouvez désormais ​démarrer ​VSCodium avec les commandes "​code"​ ou "​codium"​.
  
 ===== Extensions ===== ===== Extensions =====
  
-Visual Studio Code (et VSCodium) peuvent être modifié grâce, entre autres, à des extensions, il en existe pour beaucoup ​de choses, ​par exemple le [[https://​marketplace.visualstudio.com/​items?​itemName=attilabuti.brainfuck-syntax|support ​de la syntaxe du BrainFxck]],​ et plein d'​autres choses beaucoup plus utiles ^_^.+==== Remplacer le dépôt d'extensions de VSCodium (Open VSX Registry) ​par celui de Visual Studio Code ====
  
-<note tip>Vous pouvez voir toutes les extensions sur [[https://​marketplace.visualstudio.com/​|le marketplace de Visual Studio]] ou depuis Visual Studio Code/​VSCodium avec le raccourcis clavier CTRL + SHIFT + X</​note>​+Visual Studio Code (et VSCodium) peuvent être modifiés grâce, entre autres, à des extensions, il en existe pour beaucoup de choses, par exemple le [[https://​marketplace.visualstudio.com/​items?​itemName=attilabuti.brainfuck-syntax|support de la syntaxe du BrainFxck]],​ et plein d'​autres choses beaucoup plus utiles ^_^. 
 + 
 +<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 spécifier des variables d'​environnement. Une 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 : 
 +<file conf 50vscodium-marketplace.conf>​VSCODE_GALLERY_SERVICE_URL='​https://​marketplace.visualstudio.com/​_apis/​public/​gallery'​ 
 +VSCODE_GALLERY_ITEM_URL='​https://​marketplace.visualstudio.com/​items'​ 
 +VSCODE_GALLERY_CACHE_URL='​https://​vscode.blob.core.windows.net/​gallery/​index'​ 
 +VSCODE_GALLERY_CONTROL_URL=''</​file>​ 
 + 
 +Voir à ce sujet la [[https://​github.com/​VSCodium/​vscodium/​blob/​master/​DOCS.md#​extensions-marketplace|documentation officielle en anglais]]. 
 + 
 +==== 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 caché **.vscode** 
 +  - créer ensuite un fichier que l'on nomme **launch.json** (voir ci-dessous). 
 +  - enregistrer ce fichier dans le dossier **.vscode**. 
 +<​code>​ 
 +
 +    "​version":​ "​0.2.0",​ 
 +    "​configurations":​ [ 
 +        { 
 +            "​name":​ "​Launch index.html",​ 
 +            "​type":​ "​firefox",​ 
 +            "​request":​ "​launch",​ 
 +            "​reAttach":​ true, 
 +            "​file":​ "​${workspaceFolder}/​index.html",​ 
 +            "​timeout":​ 90000, 
 +            "​tmpDir":​ "​~/​Bureau"​ 
 +        } 
 +    ] 
 +
 +</​code>​ 
 +"​~/​Bureau"​ peut être remplacé par tout autre répertoire dont vous avez les droits d'​écriture. 
 + 
 +Pour utiliser les outils de Firefox (console, [[https://​firefox-source-docs.mozilla.org/​devtools-user/​debugger/​|débogueur]],​ etc) 
 +=> 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>​gerard@gerard-ThinkCentre-M700:​~$ 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>/​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 place lance l'url 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_info dans lequel il faut insérer 
 +<​file><?​php xdebug_info();​ 
 +?></​file>​ 
 +On doit également placer ce fichier dans le dossier /​var/​www/​html \\ 
 +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 =====
 +
 Si installation via [[#​via_deb]],​ Si installation via [[#​via_deb]],​
 <code bash>​sudo apt autoremove code</​code>​ <code bash>​sudo apt autoremove code</​code>​
 +
 ===== Liens utiles ===== ===== Liens utiles =====
 +
   * [[https://​visualstudio.developpez.com/​cours-tutoriels/​|Les meilleurs cours et tutoriels pour apprendre Visual Studio]]   * [[https://​visualstudio.developpez.com/​cours-tutoriels/​|Les meilleurs cours et tutoriels pour apprendre Visual Studio]]
  
 ---- ----
    
-//​Contributeurs ​principaux ​: [[utilisateurs:​jusdepatate|Jus de Patate]]//+//​Contributeurs : [[:utilisateurs:​jusdepatate|Jus de Patate]], [[:​utilisateurs:​krodelabestiole]],​ [[:​utilisateurs:​samcelia]]//
  • visual_studio_code.1593274951.txt.gz
  • Dernière modification: Le 27/06/2020, 18:22
  • par 81.48.135.168