Développement d’extensions VS Code modernes : les bases

Selon les statistiques WakaTime sur la programmation de 2022, Microsoft Visual Studio (VS) Code est actuellement l’éditeur de code source le plus populaire. Bien qu’il soit souvent considéré comme un éditeur de code source, il peut être utilisé comme un environnement de développement intégré (IDE) à part entière. Il vous suffit d’ajouter les bonnes extensions depuis le Marketplace Visual Studio Code.

L’attrait de VS Code va bien au-delà de son extensibilité. Malgré la multitude de plugins disponibles, il peut être nécessaire de créer sa propre extension. Cette série a précisément été conçue dans ce but.

Dans cette partie de notre série sur le développement d’extensions VS Code modernes, nous allons aborder différents types d’extensions, explorer l’architecture habituelle des extensions VS Code et découvrir quelques bonnes pratiques de développement. Cet article vous servira d’introduction et posera des bases solides avant d’approfondir le sujet dans le prochain article.

Types d’extensions VS Code

Dans le Marketplace Visual Studio Code, les extensions et les plugins sont regroupés en catégories, appelées types d’extensions, en fonction de leurs fonctions et fonctionnalités. Le plus simple pour accéder à ces catégories est de passer par la version Web du Marketplace, mais vous pouvez aussi les consulter dans la vue Extensions de l’interface utilisateur de Visual Studio Code en utilisant la balise @category: dans la barre de recherche :

En parcourant cette liste, vous vous demanderez peut-être ce que signifient réellement ces catégories. Qu’est-ce qui fait d’une extension un formateur plutôt qu’un thème ?

Voici quelques-uns des types d’extensions les plus courants dans le Marketplace Visual Studio Code et l’Open VSX Registry, un registre d’extensions open source géré par la communauté pour les extensions Visual Studio Code (VS Code).

Thèmes

Avec plus de 10 000 entrées, les thèmes comptent parmi les types d’extensions les plus courants du Marketplace Visual Studio Code. Ils vous permettent de modifier l’apparence de l’interface utilisateur de VS Code, notamment ses panneaux, ses menus et sa zone de texte.

Pour rechercher tous les plugins de thème, utilisez le filtre @category:"Themes" :

Certaines extensions de thème sont spécifiques à un composant ou à un plugin. Par exemple, le plugin C/C++ Themes présenté plus haut propose une série de thèmes visuellement optimisés pour le développement en C/C++, avec notamment des améliorations de la coloration sémantique.

Les thèmes de couleur sont généralement créés et configurés à l’aide de JSON, et se personnalisent facilement. Vous trouverez les options workbench.colorCustomizations et editor.tokenColorCustomizations dans les Paramètres utilisateur.

Les extensions de thème ont généralement une fonction essentiellement esthétique et comptent parmi les extensions les plus faciles à écrire. Elles peuvent toutefois aussi favoriser l’accessibilité et améliorer l’expérience globale de programmation.

Extensions fonctionnelles

Les extensions fonctionnelles regroupent différentes catégories d’extensions qui ajoutent des fonctionnalités à VS Code, par exemple les outils d’analyse statique (@category:"linters"), les notebooks (@category:"notebooks"), les formateurs (@category:"formatters"), les outils de test (@category:"testing"), les visualisations (@category:"visualization"), les langages de programmation (@category:"programming languages"), les débogueurs (@category:"debuggers") et les intégrations de gestion du contrôle de code source (SCM) (@category:"scm providers").

Cependant, comme Microsoft et VS Code proposent un nombre limité de balises de catégorie, certaines catégories ne décrivent pas toujours précisément la fonction d’une extension. Par exemple, Snyk Security est répertorié comme un outil d’analyse statique et une extension de langage de programmation. Et même si l’extension Snyk Security peut ressembler à un outil d’analyse de code, elle fait bien plus que cela. Son objectif principal est de renforcer la sécurité de vos projets de développement logiciel. Elle recherche les vulnérabilités open source, les vulnérabilités dans le code, les problèmes de licence, les configurations d’infrastructure as code (IaC) non sécurisées et bien plus encore :

En effet, les plugins VS Code comme Snyk Security peuvent aussi contribuer à améliorer le développement d’extensions. Snyk peut vérifier automatiquement la sécurité des dépendances de votre extension, s’assurer que vos projets sont correctement configurés et valider la qualité et la sécurité de votre code.

Extraits de code et raccourcis

Les extensions d’extraits de code et de raccourcis vous aident à personnaliser le mappage des touches de VS Code (@category:"keymaps") et ses fonctionnalités d’extraits de code (@category:"snippets"). Par exemple, REST Client est une extension multilingue qui génère des extraits de code et des modèles pour les requêtes HTTP :

À l’inverse, Eclipse Keymap ajoute à VS Code les raccourcis clavier de l’IDE Eclipse. C’est pratique pour les développeurs Java qui utilisent Eclipse comme IDE principal et souhaitent peut-être passer à VS Code :

Packs

Il existe deux types de packs : les packs de langues (@category:"language packs") et les packs d’extensions (@category:"extension packs"). Les packs de langues contiennent des données de localisation, comme des traductions de texte et des dispositions de clavier. Par exemple, le pack de langue chinois (simplifié) (简体中文) vous permet de remplacer la langue par défaut de l’interface utilisateur de VS Code par le chinois simplifié.

VS Code vous permet également de modifier la langue d’affichage après avoir installé le pack de langue. Si vous souhaitez contribuer aux traductions et à la création d’un pack de langue, pensez à rejoindre le projet de localisation de la communauté VS Code.

Par ailleurs, les packs d’extensions rassemblent plusieurs extensions dans une seule installation. Ils suivent généralement un thème ou vous fournissent rapidement un environnement de développement prêt à l’emploi. Par exemple, le Python Extension Pack contient l’extension Python for VS Code, ainsi que Python Environment Manager, Python Indent et autoDocstring - Python Docstring Generator.

Lorsque vous cliquez sur le bouton Install du Python Extension Pack, VS Code installe simultanément toutes les extensions du pack qui ne le sont pas déjà :

En définitive, les packs d’extensions vous évitent de télécharger plusieurs extensions une par une. C’est particulièrement pratique pour configurer des espaces de travail pour des langages qui ne sont pas directement (ou officiellement) pris en charge par Microsoft. C’est aussi un excellent moyen de regrouper toutes vos extensions VS Code personnalisées.

Une fois le type d’extensions à créer choisi, vous pouvez commencer à en définir la structure.

Architecture habituelle des extensions VS Code

L’hôte d’extensions de VS Code est chargé d’exécuter les extensions. Il utilise le manifeste de l’extension (package.json) pour trouver son point d’entrée et l’exécuter en fonction de ses événements d’activation. Ces événements d’activation sont également déclarés dans le fichier manifeste. Ils vous permettent de définir les déclencheurs de vos extensions (par exemple, l’exécution d’une commande ou la sélection d’un langage spécifique).

Le fichier package.json contient également une liste de dépendances essentielles à votre projet d’extension. Parmi elles figure le module @types/vscode, qui vous permet d’utiliser l’API d’extension de VS Code.

Remarque : le module @types/vscode remplace le package `vscode-extension-vscode`, qui est obsolète et ne doit pas être référencé dans votre fichier package.json ni ailleurs dans votre projet.

Le manifeste de l’extension contient également un ensemble de points de contribution. Ceux-ci vous permettent de contrôler la manière dont les fonctionnalités de votre extension sont appelées depuis VS Code (par exemple, vous pouvez configurer une commande ou un élément de menu pour appeler votre extension).

Le fichier d’entrée de l’extension contient son comportement principal. Il s’appuie principalement sur le module vscode, qui doit toujours être le premier élément importé dans votre extension :

export function activate(context: vscode.ExtensionContext) {
    //Instructions and Commands
}

Le module vscode contient l’API de VS Code, qui met à votre disposition un ensemble d’interfaces permettant d’étendre les fonctionnalités de VS Code. Il s’agit notamment de l’interface d’extension, qui contient les fonctionnalités nécessaires pour gérer, configurer et créer des extensions.

La méthode activate de l’interface d’extension vous permet de définir le comportement de votre extension à son activation. C’est l’étape suivante dans le fichier d’entrée de l’extension :

export function activate(context: vscode.ExtensionContext) {
    //Instructions and Commands
}

Ce code fonctionne comme un gestionnaire d’événements : il déclare un ensemble de commandes qui s’exécutent lorsqu’un événement se produit. Vous pouvez également inclure un appel à la fonction deactivate et l’exporter :

export function deactivate(context: vscode.ExtensionContext) {}

Cela vous permet d’effectuer le nettoyage de votre extension après son activation ou son exécution.

Les fichiers d’entrée peuvent être écrits en TypeScript ou en JavaScript ; toutefois, il est recommandé d’utiliser le premier. Dans les deux cas, les projets d’extension TypeScript et JavaScript doivent inclure un fichier config, qui désigne un répertoire comme dossier racine du projet et aide le compilateur à le trouver. Le fichier config contient également diverses propriétés et options de compilation. Pour vos projets TypeScript, vous devez utiliser le fichier tsconfig.json et, pour vos projets JavaScript, les fichiers jsconfig.json.

Le répertoire de votre projet d’extension contient également deux fichiers supplémentaires dans le dossier .vscode :

1. tasks.json

tasks.json définit un ensemble de tâches propres à un dossier, un projet ou un espace de travail que VS Code doit exécuter lorsqu’elles sont déclenchées. Ces tâches comprennent principalement des instructions et des configurations de compilation du projet. Par exemple, comme VS Code compile ses extensions à l’aide de gestionnaires de paquets tels que npm, le fichier tasks.json de votre projet d’extension les référence généralement, comme dans cet exemple :

	"type": "npm",
	"script": "watch",
	"problemMatcher": "$ts-webpack-watch",
	"isBackground": true,
	"presentation": {
		"reveal": "never",
		"group": "watchers"
	},
	"group": {
		"kind": "build",
		"isDefault": true
	}

Cet exemple de fichier tasks.json définit un observateur de compilation qui surveille le processus de compilation de votre projet pour détecter les erreurs et les avertissements. Ce script s’appuie principalement sur npm pour exécuter et empaqueter le moteur de détection de problèmes ts-webpack-watch.

2. launch.json

launch.json définit la manière dont VS Code doit exécuter (ou déboguer) vos extensions après leur compilation. Il contient des informations sur l’environnement d’exécution utilisé par votre extension :

"configurations": [
    {
        "name": "Run Extension",
        "type": "extensionHost",
        "request": "launch",
        "args": [
            "--extensionDevelopmentPath=${workspaceFolder}"
        ],
        "outFiles": [
            "${workspaceFolder}/dist/**/*.js"
        ],
        "preLaunchTask": "${defaultBuildTask}"
    },
]

Cet exemple de fichier launch.json présente une configuration qui définit les instructions de lancement d’une extension VS Code. Elle précise notamment l’emplacement du code source et des exécutables empaquetés.

Voici à quoi ressemble le répertoire d’un projet d’extension de base :

Project Parent Folder
├── .vscode
│   ├── launch.json     
│   └── tasks.json                
├── src
│   └── extension.ts    //Extension Entry File
├── package.json       	//Manifest
├── tsconfig.json  

Bonnes pratiques de développement d’extensions VS Code

En raison de la structure des extensions VS Code, les développeurs peuvent être tentés de négliger certains fondamentaux. Pourtant, pour créer efficacement vos extensions, vous devez respecter certains principes, notamment les bonnes pratiques suivantes :

Testez vos extensions de manière approfondie

Si vous prévoyez de publier votre ou vos extensions sur un Marketplace Visual Studio Code pris en charge, veillez à ne pas y inclure de code défectueux. Vous devez donc vous assurer que votre extension a été correctement testée à l’aide de différentes méthodes d’évaluation logicielle, telles que les tests unitaires (le cas échéant) et les tests rigoureux fondés sur des scénarios.

Vous n’êtes pas obligé d’utiliser des plugins ou des bibliothèques externes pour tester vos extensions VS Code : VS Code vous fournit des mécanismes et des outils de tests d’intégration. En particulier, son hôte de développement d’extensions vous permet de tester vos extensions dans un environnement distinct de l’instance officielle de VS Code.

N’oubliez pas que les utilisateurs évaluent et commentent les extensions dans le Marketplace Visual Studio Code. Il est donc essentiel de les tester en profondeur. Ne prenez pas le risque de ternir la réputation de votre marque en déployant un produit bogué ou non sécurisé.

Stockez les données sensibles de la manière la plus sécurisée possible

VS Code a fait évoluer la façon dont il enregistre et stocke les données utilisateur. Avant l’introduction de VS Code 1.53, les informations utilisateur étaient gérées à l’aide de l’interface ExtensionContext ; toutefois, cette solution n’était pas efficace.

Aujourd’hui, la meilleure façon de gérer les informations sensibles dans VS Code consiste à utiliser l’utilitaire SecretStorage.

Respectez les recommandations de Microsoft en matière d’expérience utilisateur (UX) pour VS Code

Microsoft a publié des recommandations en matière d’expérience utilisateur (UX) qui contribuent à garantir la cohérence des extensions avec l’architecture et les normes de VS Code. Il est recommandé de vous familiariser avec l’ensemble de ces recommandations, mais accordez une attention particulière à celles qui concernent les fonctionnalités de votre extension.

Par exemple, même si votre extension n’implémente pas de composants visuels sophistiqués, comme les webviews, ses fonctionnalités principales peuvent être assez complexes pour justifier un parcours guidé. La création d’un parcours guidé, c’est-à-dire d’un tutoriel interactif de démarrage rapide, aide les nouveaux utilisateurs à se familiariser avec les fonctionnalités de votre extension. En règle générale, les développeurs doivent veiller à ce que leur logiciel soit bien documenté, tant dans le code que dans son utilisation.

Veillez également à rendre la prise en main aussi simple que possible. Cela implique d’ajouter les images et les repères visuels nécessaires. Microsoft recommande d’utiliser des SVG avec les couleurs de thème de l’API VS Code.

Les meilleures extensions VS Code s’intègrent si naturellement à l’interface qu’il est presque impossible de les distinguer des fonctionnalités natives de VS Code.

Regroupez vos extensions

Comme VS Code appartient à Microsoft, on oublie facilement qu’il s’agit (comme ses variantes) d’une application multiplateforme. En plus de Windows, VS Code est disponible sur les dernières versions de macOS, ainsi que sur les distributions Linux basées sur Debian et Red Hat. Vos extensions doivent donc respecter les principes fondamentaux de VS Code et fonctionner sur toutes les plateformes compatibles avec VS Code.

Pour y parvenir, le mieux est de regrouper vos fichiers. Microsoft recommande d’utiliser esbuild pour regrouper les extensions VS Code, en raison de sa rapidité et de son efficacité. webpack est une autre bonne option.

Par ailleurs, avec l’adoption croissante de la plateforme en tant que service (PaaS), il est important de veiller à ce que vos extensions soient compatibles avec Visual Studio Code pour le Web. Seules les extensions regroupées fonctionnent parfaitement avec cette version Web.

De plus, esbuild et webpack peuvent tous deux réduire la taille de votre code. La minification consiste à supprimer le texte superflu et à renommer les membres (c’est-à-dire les méthodes/fonctions et les variables). Malheureusement, cela peut modifier le comportement de votre code. Par exemple, on sait que le code source utilisant les fonctions Function.prototype.name et toString() peut ne plus fonctionner correctement après minification.

En réalité, de nombreux outils de minification présentent ces limites. Si vous pensez que le minificateur de webpack pose problème dans votre code, vous pouvez le désactiver temporairement, le temps de trouver la cause du problème.

À l’inverse, esbuild ne minifie pas le code, sauf si vous lui demandez explicitement de le faire [à l’aide de l’option --minify flag], ce qui vous donne davantage de contrôle sur le processus de minification.

Les développeurs doivent également veiller à ce que leurs dépendances critiques soient optimisées pour le regroupement. Malheureusement, si vous essayez de regrouper des dépendances dynamiques, vos bundles échoueront probablement. Ces dépendances doivent être déclarées comme statiques ou exclues à l’aide des dépendances externes. Les développeurs peuvent simplifier cette étape grâce à dependency-check de Snyk.

Sécurisez vos extensions

Le Visual Studio Code Marketplace analyse activement les nouvelles extensions et les mises à jour à la recherche de contenus malveillants. Les utilisateurs de VS Code peuvent également signaler les extensions dangereuses à l’aide du lien Signaler un abus. Malgré ces mesures de précaution, le Visual Studio Code Marketplace n’est toutefois pas exempt de contenus malveillants.

Une étude publiée par Snyk a révélé la présence de plusieurs extensions vulnérables sur le Visual Studio Code Marketplace, susceptibles d’exposer les systèmes à différentes attaques, telles que la falsification de requêtes côté serveur et la traversée de répertoires.

Beaucoup de ces extensions ne sont pas créées dans une intention malveillante : les développeurs négligent simplement la sécurité, faute de connaître les risques ou de disposer du temps nécessaire. Les mesures de sécurité doivent être prises en compte et mises en œuvre dès le début du cycle de développement.

Cette tâche peut sembler intimidante, mais grâce à des outils comme Snyk, vous n’avez pas à élaborer vos propres pratiques et contrôles de sécurité. Snyk propose une offre gratuite, permettant à tous les développeurs d’utiliser et d’intégrer ses fonctionnalités principales.

De plus, Snyk sait que le développement logiciel moderne évolue à un rythme soutenu. En vous permettant de lier votre profil GitHub ou Google, Snyk simplifie la création d’un compte. Vous n’êtes pas non plus obligé d’utiliser l’interface Web de Snyk pour vous authentifier ou accéder à ses fonctionnalités. Vous pouvez utiliser la Snyk CLI ou l’une de ses nombreuses autres intégrations, notamment l’extension VS Code :

Elle peut analyser les problèmes de sécurité dans le code que vous écrivez, ainsi que les modules et bibliothèques dont il dépend. L’interface de l’extension VS Code de Snyk est une version réduite de l’interface Web. Elle s’intègre à de nombreux éléments de l’interface de VS Code, notamment aux diagnostics, à la vue des problèmes/au panneau et à l’éditeur. Elle vous permet de voir quelles lignes de votre code exposent votre extension à des attaques potentielles :

Comme certains de vos modules ou dépendances peuvent être isolés dans un bac à sable après la publication de votre extension, il n’est pas toujours nécessaire de les sécuriser manuellement. Par exemple, vous pouvez utiliser le panneau d’analyse de Snyk pour ignorer les lignes ou les fichiers que vous jugez sans rapport avec la sécurité de votre projet :

Par défaut, la Snyk VS Code Extension surveille et analyse automatiquement votre projet pendant que vous le développez. Vous pouvez toutefois configurer l’extension pour qu’elle s’exécute au moment et de la manière qui vous conviennent :

En définitive, c’est vous qui décidez comment intégrer l’extension à votre workflow.

Conclusion

Ce guide vous apporte toutes les connaissances nécessaires pour commencer à développer des extensions VS Code. Vous y avez découvert la structure de base des extensions VS Code, notamment la façon dont le manifeste de l’extension est lié au fichier d’entrée. Vous avez également découvert quelques bonnes pratiques pour vous lancer.

L’essentiel est de veiller à ce que votre extension respecte les normes UX de Microsoft et soit sécurisée. Pour vérifier que vos extensions reposent sur un code source de haute qualité et des dépendances sécurisées, utilisez Snyk, la plateforme de sécurité pensée pour les développeurs. Snyk propose une impressionnante sélection d’intégrations, dont un plug-in VS Code permettant d’effectuer et d’automatiser des contrôles de qualité et de sécurité sur vos projets.