Extensions VS Code

Avant d'en écrire une, il faut savoir comment une extension vit chez l'utilisateur : d'où elle vient, quand elle se charge, ce qu'elle a le droit de faire et comment on la désactive quand elle pose problème.

Comment VS Code exécute une extension

VS Code est une application Electron. L'interface tourne dans un processus, les extensions dans un autre : l'extension host. Une extension lente ou plantée ne fige donc pas l'éditeur. Elle ne touche jamais le DOM de l'interface ; elle passe par l'API vscode, qui transmet ses demandes au processus principal.

Une extension n'est pas chargée au démarrage. Elle s'active sur un événement : l'ouverture d'un fichier Python, l'appel d'une commande, la présence d'un Dockerfile dans le projet. Tant que l'événement n'arrive pas, elle ne coûte rien. C'est la première règle de performance, on y revient au chapitre 3.

Il existe trois familles d'extensions :

Installer une extension

Le panneau Extensions s'ouvre avec Ctrl+Shift+X (Cmd+Shift+X sur macOS). La recherche accepte des filtres utiles :

@installed          extensions installées
@enabled            extensions actives
@disabled           extensions désactivées
@recommended        recommandées pour ce projet
@updates            mises à jour disponibles
@category:themes    filtrer par catégorie
@sort:installs      trier par nombre d'installations

Avant d'installer, regardez trois choses sur la page de l'extension : l'éditeur (la coche bleue indique un domaine vérifié), la date de dernière mise à jour et le lien vers le dépôt. Une extension a les mêmes droits que votre compte utilisateur : elle peut lire vos fichiers, lancer des processus et appeler Internet. Des extensions malveillantes imitant des noms connus ont déjà été retirées du Marketplace. Le réflexe est le même que pour un paquet npm, et l'article sur la cybersécurité pour les développeurs détaille ce type d'attaque par la chaîne d'approvisionnement.

La ligne de commande code

Tout ce qui se fait dans le panneau se fait aussi en ligne de commande. C'est ce qui permet de scripter l'installation d'un poste.

# Lister les extensions installées, avec leur version
code --list-extensions --show-versions
 
# Installer par identifiant (éditeur.nom)
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
 
# Installer un fichier .vsix local
code --install-extension ./todo-radar-0.1.0.vsix
 
# Désinstaller
code --uninstall-extension dbaeumer.vscode-eslint

L'identifiant se lit sur la page de l'extension ou dans l'URL du Marketplace : itemName=dbaeumer.vscode-eslint.

Pour rejouer sa configuration sur une nouvelle machine :

code --list-extensions > extensions.txt
cat extensions.txt | xargs -L 1 code --install-extension

La synchronisation des paramètres (Settings Sync, connexion GitHub ou Microsoft) fait la même chose automatiquement, mais le fichier texte a l'avantage d'être versionné.

Recommander des extensions à l'équipe

Un fichier .vscode/extensions.json à la racine du dépôt liste les extensions conseillées pour le projet. À l'ouverture, VS Code propose de les installer.

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ],
  "unwantedRecommendations": [
    "hookyqr.beautify"
  ]
}

unwantedRecommendations évite qu'une extension concurrente (un autre formateur, par exemple) soit suggérée et entre en conflit avec celle du projet.

Activer par projet, organiser par profil

Une extension peut être désactivée seulement pour l'espace de travail courant : clic droit sur l'extension, Disable (Workspace). Pratique pour couper un linter Python dans un projet front.

Les profils vont plus loin. Un profil regroupe extensions, réglages, raccourcis et thème. On en crée un par contexte (« Web », « Python », « Présentation » avec une police énorme) via la roue crantée, Profiles. Chaque dossier se souvient de son profil.

Diagnostiquer une extension qui pose problème

Trois commandes de la palette (Ctrl+Shift+P) règlent l'essentiel des cas :

Le panneau Output (Ctrl+Shift+U) contient un canal par extension bavarde. Le canal Extension Host affiche les erreurs d'activation. Si une extension ne fait rien, c'est souvent là que se trouve la réponse.

Pour lancer VS Code sans aucune extension et vérifier si le problème vient d'elles :

code --disable-extensions

Workspace Trust

Ouvrir un dossier téléchargé peut suffire à exécuter du code : une tâche, un réglage qui pointe vers un exécutable, une extension qui lance un outil du projet. Le mode restreint de Workspace Trust bloque ces comportements tant que vous n'avez pas déclaré le dossier digne de confiance. Une extension bien écrite déclare dans son package.json comment elle se comporte en mode restreint ; on le fera pour TODO Radar.

Le fil rouge : TODO Radar

Voici ce que l'extension saura faire à la fin du cours :

• compter les TODO, FIXME et HACK du fichier ouvert dans la barre d'état ;
• lister tous ceux du projet dans une vue latérale, cliquables ;
• surligner les commentaires dans l'éditeur ;
• signaler les TODO sans numéro de ticket et proposer une correction rapide ;
• afficher des statistiques dans un panneau webview ;
• être testée, bundlée et publiée sur le Marketplace et Open VSX.

Le chapitre suivant génère le projet et lance la première version dans une fenêtre de développement.