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 de Microsoft, s'appelle VSCodium.

La page ci-dessous vous explique comment installer l'une ou l'autre version, à votre convenance.

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 modifier le fichier product.json pour y avoir accès.

Cette page vous laisse le choix entre la version Microsoft et VSCodium.

Allez sur cette page, et sélectionnez le fichier "deb (Debian, Ubuntu)" en 64 ou 32 bits selon votre ordinateur. Installez le à l'aide de l'interface graphique (tel que gdebi-gtk) ou en ligne de commande

sudo dpkg -i code_*.deb

et vous pourrez exécuter Visual Studio Code avec la commande

code

Via PPA de Microsoft

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

Via snap

L'installation via snap est la plus simple:

sudo snap install code --classic

Installation (VSCodium)

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 des dépôts Ubuntu (il n'y a pas de paquet .deb) :

sudo snap install codium

Vous pouvez aussi l'installer directement à partir de dépôt du projet codium :

# 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ésormais démarrer VSCodium en utilisant la commande

codium

Si vous souhaiter utiliser la commande "code" pour le lancer vous pouvez ajouter un lien symbolique :

sudo ln -s /usr/bin/codium /usr/bin/code

Vous pouvez désormais démarrer VSCodium avec les commandes "code" ou "codium".

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

Vous pouvez voir toutes les extensions de Visual Studio Code sur le Visual Studio Marketplace, et celles de VSCodium sous l'Open VSX Registry ou directement depuis Visual Studio Code/VSCodium avec le raccourcis clavier CTRL + SHIFT + X

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.

Extension "Debbuger for Firefox" - VSCodium

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.

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éo1) 2) 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 local ou depuis un serveur web local - un seul fichier de configuration

1 - Installer xdebug Installer Xdebug:

 sudo apt install php-xdebug 

Vérifier la bonne installation:

php -v

donne:

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:~$ 

On peut utiliser deux fichiers pour la configuration de Xdebug. Le premier pour une session "CLI" (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:

gerard@gerard-ThinkCentre-M700:~$ sudo rm /etc/php/8.1/cli/conf.d/20-xdebug.ini

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

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

3 - Créee 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 fichierde 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 dans lequel, on met:

<?php
phpinfo();

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:

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_info dansle quel il faut insérer

<?php xdebug_info();
?>

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
- Ouvir 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" option.
- Lancer l'application avec un navigateur internet (localhost/my-progam.php).Le débogueur démarre.

Serveurs web internes

Serveur web interne PHP

PHP dispose d'un serveur web interne. Voici un exemple de démarrage!

php -S localhost:8000

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: (FilePreferencesSettings, 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

Si installation via via_deb,

sudo apt autoremove code

2)
d'après ce sujet sur le forum
  • visual_studio_code.txt
  • Dernière modification: Le 17/03/2024, 17:55
  • par 82.66.208.97