✎ visual_studio_code [Wiki ubuntu-fr]

Vous affichez une ancienne révision du document ! Si vous l'enregistrez, vous créerez une nouvelle version avec ce contenu.

====== Visual Studio Code ======

[[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 les [[https://vscodium.com/#why|ajouts propriétaires et intrusifs de Microsoft]], s'appelle **[[https://vscodium.com/|VSCodium]]**(([[https://github.com/VSCodium/vscodium.github.io|GitHub]])).

Cette page vous laisse le choix entre la version Microsoft **[[#Installation VSCode|VSCode]]** et la version communautaire **[[#Installation VSCodium|VSCodium]]**, à votre convenance :

===== Installation VSCode =====

Il existe plusieurs manière d'installer **VSCode** sur Ubuntu :

==== Via snap ====

L'installation via [[snap|snap]] est la plus simple :
**VSCode** est disponible en [[:snap]] depuis [[https://snapcraft.io/code|Snapcraft]].

On peut donc simplement installer ''code'' depuis le [[:snap store|centre d'applications (Snap Store)]], ou installer le paquet ''code'' en ligne de commande :
<code>snap install code --classic</code>

==== Via le PPA de Microsoft (déconseillé) ====

La clé PGP et le [[:PPA]] peuvent être ajoutés comme suit :

<code bash>
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 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>
Puis mettez à jour la liste des paquets et installez **VSCode** :
<code bash>
sudo apt install apt-transport-https
sudo apt update
sudo apt install code # ou code-insiders
</code>

==== Paquet deb isolé (déconseillé) ====

<note>
Cette méthode n'est pas recommandée parce qu'elle ne permet pas les mises à jour automatiques.
</note>

Allez sur [[https://code.visualstudio.com/download|cette page]], et sélectionnez le fichier //.deb (Debian, Ubuntu)// en //x64// (à moins que vous utilisiez un processeur différent).
Installez-le à l'aide de l'interface graphique (tel que [[:gdebi|gdebi-gtk]]) ou en ligne de commande <code>sudo dpkg -i code_*.deb</code>

===== Installation VSCodium =====

Comme indiqué plus haut **[[https://vscodium.com/|VSCodium]]**(([[https://github.com/VSCodium/vscodium.github.io|GitHub]])) est la version communautaire, libre et débarrassée des fonctionnalités de //tracking// de **Visual Studio Code**.

<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>

Pour installer cette version, il y a plusieurs solutions :
  * **VSCodium** est distribué par ses développeurs dans les versions les plus récentes sur tous les systèmes Linux en [[#Flatpak]].
  * Ils fournissent aussi un paquet [[#snap]] officiel.
  * Il existe aussi un [[#dépôt APT]] pour une version [[:deb]].
  * Il est aussi disponible en [[#Appimage]] sur [[https://github.com/VSCodium/vscodium/releases|GitHub]].

==== Flatpak ====

Le dernière version de **VSCodium** est proposée par ses développeurs en [[:Flatpak]] sur le dépôt [[https://flathub.org/apps/com.vscodium.codium|Flathub]].

On peut donc l'obtenir en [[:tutoriel:installer_application_flatpak|installant Flatpak]] avec le [[:flatpak#ajout_du_depot_flathub|dépôt Flathub]] si ce n'est pas déjà fait, puis en installant ''VSCodium'' depuis [[:gnome-software|GNOME Logiciels]], ou en installant le paquet ''com.vscodium.codium'' en ligne de commande :
<code>flatpak install com.vscodium.codium</code>

==== Snap ====

**VSCodium** est disponible en [[:snap]] depuis [[https://snapcraft.io/codium|Snapcraft]].

On peut donc l'installer sur Ubuntu simplement en installant ''codium'' depuis le [[:snap store|centre d'applications (Snap Store)]], ou en installant le paquet ''codium'' en ligne de commande :
<code>snap install codium</code>

==== Appimage ====

<note>
Cette méthode n'est pas recommandée parce qu'elle ne permet //a priori// pas les mises à jour automatiques.
</note>

Pour installer une **[[:Appimage]]** référez-vous avant tout au [[:appimage#installer_un_appimage|chapitre dédié]] au sujet.

En résumé téléchargez le fichier correspondant à votre version d'Ubuntu sur [[https://github.com/VSCodium/vscodium/releases|GitHub]], puis [[:permissions#modifier_les_permissions|rendez-le exécutable]] (clic droit sur le fichier -> //Propriétés// -> //Permissions// -> //Autoriser l’exécution//). Finalement lancez-le en double-cliquant dessus.\\ 
Vous pouvez utiliser un service tel que **[[:appimage#go_appimageappimaged|appimaged]]** pour créer automatiquement un [[:raccourci-lanceur|lanceur]].

==== Dépôt APT ====

Paul Carroty fournit un [[:PPA|dépôt APT]] pour **VSCodium** sur Ubuntu et Debian.

La marche à suivre pour l'installer est expliquée en anglais sur [[https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo#how-to-install-for-debianubuntulinux-mint|cette page]].

<code bash>
# 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

# Ajout du repository de VSCodium
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

# Installation de VSCodium
sudo apt install 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 :
<code>
sudo ln -s /usr/bin/codium /usr/bin/code
</code>

===== Utilisation =====

Vous pouvez démarrer VSCode avec la commande ''code'' ou VSCodium avec ''codium'' (suivi éventuellement d'un nom de fichier ou répertoire).

===== Extensions =====

==== Remplacer le dépôt d'extensions de VSCodium (Open VSX Registry) par celui de Visual Studio Code ====

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 serveur ou depuis un serveur web local - un seul fichier de configuration ===

1 - Installer xdebug

Installer Xdebug :
<code>sudo apt install php-xdebug</code>
Pour vérifier la bonne installation, la commande
  php -v
devrait mentionner ''Xdebug'' dans un retour du type :
<code>
PHP 8.3.6 (cli) (built: Dec  2 2024 12:36:18) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.3.6, Copyright (c) Zend Technologies
    with Zend OPcache v8.3.6, Copyright (c), by Zend Technologies
    with Xdebug v3.2.0, Copyright (c) 2002-2022, by Derick Rethans
</code>
<note>
Ces informations permettent de voir si **Xdebug** est installé et de repérer la version de PHP (8.3 ci-dessus). Les lignes de commande ci-dessous seront à adapter suivant vos versions.
</note>
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 :
  * ''/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'' :
<code>sudo rm /etc/php/8.1/cli/conf.d/20-xdebug.ini</code>
Effacer /etc/php/8.1/apache2/conf.d/20-xdebug.ini:
<code>sudo rm /etc/php/8.1/apache2/conf.d/20-xdebug.ini</code>

3 - Créer le premier lien symbolique :
<code>sudo ln -s /etc/php/8.1/mods-available/xdebug.ini /etc/php/8.1/cli/conf.d/20-xdebug.ini</code>
Puis le deuxième lien symbolique:
<code>sudo ln -s /etc/php/8.1/mods-available/xdebug.ini /etc/php/8.1/apache2/conf.d/20-xdebug.ini</code>

4 - Puis configurer l'unique fichier de configuration ''/etc/php/8.1/mods-available/xdebug.ini'' :
<code>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</code>

5 - Redémarrer apache2:
<code>sudo systemctl restart apache2</code>

6 - Créer un fichier ''phpinfo.php'' avec ce contenu :
<code><?php
phpinfo();</code>
Place ce fichier dans le répertoire ''/var/www/html'' du serveur et ouvrir dans un navigateur web l'URL ''[[http://localhost/phpinfo.php]]'' correspondant au fichier.

Vérifier la bonne installation de Xdebug :
<code>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</code>
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
<code><?php 
xdebug_info();</code>
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:
<code> php -S localhost:8082</code>
- 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.

=== le fichier launch.json de symphony ===

pour pouvoir déboguer Symfony, il faut utiliser le fichier ''launch.json'' suivant:
<code>
{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Listen for Xdebug",
        "type": "php",
        "request": "launch",
        "port": 9003,
        "pathMappings": {
          "nom_du_dossier_du_projet": "${workspaceFolder}"
        },
        "xdebugSettings": {
          "max_children": 512,
          "max_data": 1024,
          "max_depth": 5
        }
      }
    ]
  }
</code>
  
==== Serveurs web PHP ====

[[:PHP]] permet de lancer un [[:php#serveur|serveur web simple]]. Celui-ci peut être utilisé depuis **VScode**.

=== 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''

=== Serveur web interne Symfony ===

Le serveur PHP précédent fonctionne mais le serveur de Symfony est plus complet dans le cadre de l'utilisation de ce framework.
Pour le lancer:
<code>symfony server:start</code>
pour le stopper:
<code>symfony server:stop</code>

===== Désinstallation =====

Si installation via [[#via_deb]],
<code bash>sudo apt autoremove code</code>

===== Voir aussi =====

* [[https://visualstudio.developpez.com/cours-tutoriels/|cours et tutoriels]] pour apprendre à utiliser **VSCode** sur [[wpfr>Developpez.com]]
  * **[[https://github.com/coder/code-server|CODE Server]]** permet d'utiliser **VSCode** directement installé sur son serveur depuis un navigateur (utile pour gérer directement les fichiers sans jamais avoir à les télécharger - attention par contre à la [[:sécurité]] de l'installation !).
  * **[[https://zed.dev|Zed]]**, une alternative moderne

----
 
//Contributeurs : [[:utilisateurs:jusdepatate|Jus de Patate]], [[:utilisateurs:krodelabestiole]], [[:utilisateurs:samcelia]]//

Merci de recopier le code ci-contre pour prouver que vous êtes humain : H W P F L Merci de laisser ce champ vide :

Résumé

Note : En modifiant cette page, vous acceptez que le contenu soit placé sous les termes de la licence suivante : CC Paternité-Partage des Conditions Initiales à l'Identique 3.0 Unported