Visual Studio Code

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 adjonctions, comme de la télémétrie ou un logo MS.

La version libre, quasi similaire mais sans les ajouts propriétaires et intrusifs de Microsoft, s'appelle VSCodium¹⁾.

Cette page vous laisse le choix entre la version Microsoft VSCode et la version communautaire VSCodium, à votre convenance :

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

L'installation via snap est la plus simple : VSCode est disponible en snap depuis Snapcraft.

On peut donc simplement installer code depuis le centre d'applications (Snap Store), ou installer le paquet code en ligne de commande :

snap install code --classic

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

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'

Puis mettez à jour la liste des paquets et installez VSCode :

sudo apt install apt-transport-https
sudo apt update
sudo apt install code # ou code-insiders

Allez sur 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-gtk) ou en ligne de commande

sudo dpkg -i code_*.deb

Comme indiqué plus haut VSCodium²⁾ est la version communautaire, libre et débarrassée des fonctionnalités de tracking de Visual Studio Code.

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

Le dernière version de VSCodium est proposée par ses développeurs en Flatpak sur le dépôt Flathub.

On peut donc l'obtenir en installant Flatpak avec le dépôt Flathub si ce n'est pas déjà fait, puis en installant VSCodium depuis GNOME Logiciels, ou en installant le paquet com.vscodium.codium en ligne de commande :

flatpak install com.vscodium.codium

VSCodium est disponible en snap depuis Snapcraft.

On peut donc l'installer sur Ubuntu simplement en installant codium depuis le centre d'applications (Snap Store), ou en installant le paquet codium en ligne de commande :

snap install codium

Pour installer une Appimage référez-vous avant tout au chapitre dédié au sujet.

En résumé téléchargez le fichier correspondant à votre version d'Ubuntu sur GitHub, puis 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 appimaged pour créer automatiquement un lanceur.

Paul Carroty fournit un dépôt APT pour VSCodium sur Ubuntu et Debian.

La marche à suivre pour l'installer est expliquée en anglais sur cette page.

# 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

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

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 support de la syntaxe du BrainFxck, et plein d'autres choses beaucoup plus utiles .

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 créer un fichier /etc/environment.d/50vscodium-marketplace.conf (avec les droits d'administration) contenant le texte suivant :

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

Voir à ce sujet la documentation officielle en anglais.

Pour faire fonctionner l'extension "Debbuger for Firefox" en local avec VSCodium, il faut:

1. créer dans le dossier des programmes, un dossier caché .vscode
2. créer ensuite un fichier que l'on nomme launch.json (voir ci-dessous).
3. enregistrer ce fichier dans le dossier .vscode.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "file": "${workspaceFolder}/index.html",
            "timeout": 90000,
            "tmpDir": "~/Bureau"
        }
    ]
}

"~/Bureau" peut être remplacé par tout autre répertoire dont vous avez les droits d'écriture.

Pour utiliser les outils de Firefox (console, débogueur, etc) ⇒ clic droit sur la page de Firefox → Inspecter.

Xdebug permet de déboguer des fichiers PHP avec VSCodium ou VSCode.

Pour un débogage depuis le serveur, tout est expliqué dans cette vidéo^{3) 4)} 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.

1 - Installer xdebug

Installer Xdebug :

sudo apt install php-xdebug

Pour vérifier la bonne installation, la commande

php -v

devrait mentionner Xdebug dans un retour du type :

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

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 :

sudo rm /etc/php/8.1/cli/conf.d/20-xdebug.ini

Effacer /etc/php/8.1/apache2/conf.d/20-xdebug.ini:

sudo rm /etc/php/8.1/apache2/conf.d/20-xdebug.ini

3 - Créer le premier lien symbolique :

sudo ln -s /etc/php/8.1/mods-available/xdebug.ini /etc/php/8.1/cli/conf.d/20-xdebug.ini

Puis le deuxième lien symbolique:

sudo ln -s /etc/php/8.1/mods-available/xdebug.ini /etc/php/8.1/apache2/conf.d/20-xdebug.ini

4 - Puis configurer l'unique fichier de configuration /etc/php/8.1/mods-available/xdebug.ini :

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

5 - Redémarrer apache2:

sudo systemctl restart apache2

6 - Créer un fichier phpinfo.php avec ce contenu :

<?php
phpinfo();

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 :

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

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

<?php 
xdebug_info();

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.

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:

 php -S localhost:8082

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

pour pouvoir déboguer Symfony, il faut utiliser le fichier launch.json suivant:

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

PHP permet de lancer un serveur web simple. Celui-ci peut être utilisé depuis VScode.

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

1. Executable : /usr/bin/php
2. PHP.ini : /etc/php/8.1/apache2/conf.d/20-xdebug.ini (à adapter, éventuellement)
3. Port : 9300

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:

symfony server:start

pour le stopper:

symfony server:stop

Pour supprimer cette application, il suffit de supprimer son paquet. Selon la méthode choisie, la configuration globale de l'application est conservée ou supprimée. Les journaux du système, et les fichiers de préférence des utilisateurs dans leurs dossiers personnels sont toujours conservés.

• Pour les versions deb, vous pouvez passer par le centre d'applications, ou en ligne de commande :

  sudo apt remove code codium

• Pour la version Flatpak, vous pouvez passer par GNOME Logiciels (si vous avez le plugin Flatpak), ou en ligne de commande :

  flatpak uninstall code codium

• Pour la version snap, vous pouvez passer par le centre d'applications, ou en ligne de commande :

  snap remove code codium

• Pour la version Appimage, vous devez simplement supprimer le fichier VSCodium.appimage.

• cours et tutoriels pour apprendre à utiliser VSCode sur Developpez.com
• 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 !).
• Zed, une alternative moderne

Contributeurs : Jus de Patate, krodelabestiole, samcelia