VS Code : Créer ses propres extensions

Aujourd’hui je vais vous montrer comment créer vous-même une extension dans VS Code quand on n’y connaît rien… et même si on est une quiche en TypeScript 😉

Si vous êtes arrivé sur ce post, c’est que vous êtes probablement un utilisateur de VS Code et de ses extensions. Vous avez peut-être installé les extensions basiques pour avoir la coloration syntaxique ou l’intellisense sur votre langage préféré, pour vous connecter à votre source control Git ou pour vous aider à créer des fichiers JSON ou YAML.

Dans cet article, nous ferons un tour d’horizon de ce qu’est une extension VS Code et nous verrons les bases de la création d’une extension.

[TLDR] Si vous souhaitez directement voir comment créer une extension sans la partie théorique, je vous propose d’aller à la partie Environnement de travail.

Visual Studio Code

" VS Code est un éditeur de code source léger et un environnement de développement puissant pour la création et le débogage d’applications Web et cloud modernes."

Il est gratuit et disponible sur votre plateforme préférée :

• Linux,
• MacOS,
• Windows.

Parmi ses fonctionnalités, on compte :

• Intellisense : Code-complétion intelligente (variables, méthodes, modules)
• Debug tools (breakpoints, terminal)
• Edition puissante (multi-curseur, info paramètres, refactoring, navigation, etc.)
• Source Control (Git, TFS…)

Les Extensions

VS Code est extensible. C’est-à-dire que des fonctionnalités peuvent être ajoutées tels des plugins à VSCode. Ces nouvelles fonctionnalités s’appellent des extensions.

Vous pouvez les retrouver via le panneau latéral en ouvrant l’Extensions View.

Dans cette vue vous pourrez :

• Rechercher des extensions
• Inspecter (changelog, commands, etc.) des extensions pour en connaître les détails
• Installer une extension (Install, Reload, Update)

Extension Generator

La création d’extension se fait en utilisant un moteur intitulé Yeoman qui orchestre des générateurs, dont un spécifiquement pour les extensions VS Code.
Ce moteur se base sur Node.js et fonctionne en ligne de commande.

Extension Description

Les extensions contiennent un fichier de description servant plusieurs buts.
Tout d’abord, nous allons pouvoir y déclarer son identité, avec son nom, celui de l’éditeur, voire du repository si jamais l’extension est open-source.
Nous allons également pouvoir y renseigner des informations plus techniques sur le mode de fonctionnement (lancement, settings, etc.).

Les extensions peuvent avoir des dépendances supplémentaires telles que des linters autonomes, des compilateurs ou des fichiers de configuration personnalisés afin de fonctionner correctement.
Le fichier README de l’extension, affiché dans le volet Détails de la vue Extensions, inclut des détails sur la configuration et l’utilisation de l’extension.

Voici, par exemple, la description de mon extension Git CLI Explorer.

Extension API

Activation Events

Votre extension va devoir être déclenchée. Elle peut être déclenchée par un événement ou un contexte particulier. Ces events d’activation sont décrits dans le fichier package.json

Nous pourrons y trouver des activation events tels que :

• onLanguage:${language}
• onCommand:${command}
• onDebug
• workspaceContains:${toplevelfilename}
• onFileSystem:${scheme}
• onView:${viewId}
• onUri
• onWebviewPanel:${viewType}

Commands (ou Command Handler)

Une extension peut également être déclenchée via des commandes spécifiques qui seront appelées, soit par l’utilisateur, soit par d’autres extensions.

Ces commandes sont décrites dans le fichier extension.ts

Elles sont ensuite déclarées via un binding ou liaison dans le fichier package.json.

L’erreur de débutant est de définir la logique de la commande, de faire le registerCommand et d’oublier sa déclaration.
Ne l’oubliez surtout pas car c’est le contrat de votre extension qui permettra donc à VS Code de savoir quels en sont les déclencheurs.

Complex Commands

Bien evidemment, vous pouvez aller plus loin et créer des extensions avancées avec des logiques complexes. Pour cela vous pourrez vous baser sur des API VSCode :

• vscode.diff
• vscode.open
• cursorMove
• vscode.ExectureDocumentRenameProvider
• etc.

let uri = Uri.file('/some/path/to/folder’);
let success = await commands.executeCommand('vscode.openFolder', uri);

Vous pourrez trouver toutes les API disponibles en suivant ce lien vers la documentation officielle :
Built-in Commands

Environnement de travail

Pour commencer il faut installer quelques outils.

Il faudra bien évidemment avoir VS Code, que vous pouvez télécharger en suivant ce lien : https://code.visualstudio.com/Download

Vous devrez ensuite installer le moteur de générateursYeoman. Il s’agit d’un outil basé sur Node.js, qui vous permettra de créer des extensions via un formulaire en ligne de commande.

npm install -g yo generator-code

yo code

cd helloWorld
code .

"commands": [
    {
        "command": "extension.sayHello",
        "title": "Say Good Evening"
    }
]

// Display a message box to the user
vscode.window.showInformationMessage('Good Evening !');