Débutant

VS Code : Créer ses propres extensions

Temps de lecture : 5 minutes

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.

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

Yeoman

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 details view

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

extension details view

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

extension details view

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

extension details view

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érateurs Yeoman. 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.

Commencez donc par installer Node.js si ce n’est pas déja fait : https://nodejs.org/en/

Vous pourrez alors installer le générateur VS Code Extension Generator avec la commande suivante :

npm install -g yo generator-code

Générer l’extension

Espace de travail

Nous allons commencer par initialiser notre espace de travail. Il faut donc se placer dans le répertoire qui contiendra le code de votre extension. C’est dans ce dossier parent que le générateur créera un dossier pour votre extension. Pour ma part, il s’agit du répertoire ‘repos’.

Placez-vous donc dans le dossier de votre choix et ouvrez celui-ci dans VS Code ou une fenêtre de commande.

Utiliser le générateur

Pour utiliser Yeoman et plus spécifiquement le générateur d’extension VS Code, il faut lancer la commande suivante :

yo code

Un formulaire s’ouvre alors dans votre terminal.
Pour ma part j’ai créé une extension nommée helloWorld, mais vous pouvez bien évidemment choisir le nom de votre choix et remplacer dans les insctructions suivantes.
Renseignez donc les paramètres suivants :

  • type : New Extension (TypeScript)
  • name : helloWorld
  • identifier : helloWorld
  • description : votre description
  • publisher name : votre publisher name
  • Enable stricter TypeScript checking : Y
  • Setup linting using ‘tslint’ : Y
  • Initialize a git repository? : n

yo code success

Un nouveau dossier helloWorld a été créé.

Initialiser le workspace

Le code de base de notre extension étant généré, nous pouvons ouvrir cet espace de travail dans VS Code :

cd helloWorld
code .

Debug de l’extension

Appuyez sur F5

Une nouvelle fenêtre VS Code doit s’ouvrir, intitulée Extension Development Host.
Dans cette fenêtre, vous pouvez utiliser votre extension.

Exécution de la commande

Appuyez sur Ctrl + Shift + P pour Windows (Cmd +Shift + P pour Mac) et lancez la commande Hello World.

VSCE command hello world

Une fenêtre de message doit alors apparaître avec le message Hello World.

VSCE Dialog window hello world

Modifier la commande

Ouvrez le fichier package.json et remplacez la partie "commands" par le contenu suivant :

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

Ouvrez le fichier extension.ts et remplacez le message dans la méthode vscode.window.showInformationMessage pour afficher "Good Evening !" :

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

Appuyez sur F5 pour lancer l’extension et lancez la commande Say Good Evening.
Vous devriez alors voir le message suivant :

VSCE dialog Good Evening

Conclusion

Voilà, vous avez créé votre première extension. 🥳

Ok elle est un peu simple mais vous avez désormais les bases pour créer des extensions un peu plus utiles.

N’hésitez pas d’ailleurs à me raconter dans les commentaires les extensions que vous envisagez ou que avez déja créées.

D’ici là, #restezchezvous !!!

Nombre de vue : 199

AJOUTER UN COMMENTAIRE