M

MLOG

Français

Débloquez la puissance de VS Code en apprenant à créer des extensions personnalisées. Ce guide vous accompagne de la configuration à la publication.

Maîtriser le développement d'extensions VS Code : un guide complet pour les développeurs du monde entier

Visual Studio Code (VS Code) est devenu l’éditeur de code de référence pour des millions de développeurs dans le monde entier. Sa popularité découle de sa nature légère, de ses fonctionnalités puissantes et, surtout, de son extensibilité. La possibilité de créer des extensions personnalisées permet aux développeurs d’adapter l’éditeur à leurs besoins spécifiques, ce qui améliore la productivité et rationalise les flux de travail. Ce guide complet vous guidera tout au long du processus de création de vos propres extensions VS Code, de la configuration initiale à la publication de votre création pour que le monde entier puisse l’utiliser.

Pourquoi développer des extensions VS Code ?

Le développement d’extensions VS Code offre de nombreux avantages, tant pour les développeurs individuels que pour les organisations :

Conditions préalables

Avant de vous lancer dans le développement d’extensions, assurez-vous que les éléments suivants sont installés :

Configuration de votre environnement de développement

Une fois les conditions préalables en place, vous êtes prêt à configurer votre environnement de développement :

  1. Créer un nouveau projet d’extension : Ouvrez votre terminal et exécutez la commande suivante pour démarrer le générateur d’extensions :
    2. yo code
  2. Répondre aux invites : Le générateur posera une série de questions sur votre extension. Voici une ventilation des invites courantes et des réponses recommandées :
    • Quel type d’extension voulez-vous créer ? Choisissez « Nouvelle extension (TypeScript) » pour une extension basée sur TypeScript, ce qui est l’approche recommandée.
    • Quel est le nom de votre extension ? Choisissez un nom descriptif et unique pour votre extension. Exemples : « Code Spell Checker », « JavaScript Snippets », « Python Autocomplete ».
    • Quel est l’identifiant de votre extension ? Il s’agit d’un identifiant unique pour votre extension, généralement au format `publisher.extension-name`. Choisissez un nom d’éditeur (par exemple, votre nom d’utilisateur GitHub ou le nom de votre entreprise).
    • Quelle est la description de votre extension ? Fournissez une description concise et informative de ce que fait votre extension.
    • Initialiser un dépôt git ? Choisissez « Oui » pour initialiser un dépôt Git pour le contrôle de version.
    • Voulez-vous utiliser eslint pour linter le code ? Choisissez « Oui » pour appliquer la cohérence du style de code.
  3. Ouvrir le projet dans VS Code : Une fois que le générateur est terminé, ouvrez le dossier du projet nouvellement créé dans VS Code.

Comprendre la structure du projet

Le générateur d’extensions crée une structure de projet de base avec les fichiers clés suivants :

Écrire votre première extension

Commençons par créer une extension simple qui affiche un message « Hello World » lorsqu’une commande est exécutée :

  1. Ouvrir `src/extension.ts` : Ce fichier contient la fonction `activate`, qui est appelée lorsque votre extension est activée.
  2. Modifier la fonction `activate` : Remplacez le code existant par ce qui suit :
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension "my-extension" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Explication :
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)` : Enregistre une commande avec l’ID `my-extension.helloWorld`. Cette commande sera disponible dans la palette de commandes VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')` : Affiche un message d’information dans la fenêtre VS Code.
    • `context.subscriptions.push(disposable)` : Ajoute la commande aux abonnements de l’extension, en veillant à ce qu’elle soit correctement supprimée lorsque l’extension est désactivée.
  4. Modifier `package.json` : Ajoutez ce qui suit à la section `contributes` pour définir la commande :
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Explication :
    • `"commands"` : Définit les commandes que votre extension contribue.
    • `"command": "my-extension.helloWorld"` : Spécifie l’ID de commande qui correspond à l’ID utilisé dans `extension.ts`.
    • `"title": "Hello World"` : Définit le nom d’affichage de la commande dans la palette de commandes.

Tester votre extension

Il est maintenant temps de tester votre extension :

  1. Appuyez sur F5 : Cela lancera une nouvelle fenêtre VS Code avec votre extension installée. Il s’agit de l’« Extension Development Host ».
  2. Ouvrez la palette de commandes : Appuyez sur `Ctrl+Maj+P` (ou `Cmd+Maj+P` sur macOS) pour ouvrir la palette de commandes.
  3. Tapez « Hello World » : Vous devriez voir votre commande répertoriée dans la palette de commandes.
  4. Sélectionnez « Hello World » : Cliquer sur la commande l’exécutera et affichera le message « Hello World » dans la fenêtre VS Code.

Débogage de votre extension

Le débogage est crucial pour identifier et corriger les problèmes dans votre extension. VS Code fournit un excellent support de débogage :

  1. Définir des points d’arrêt : Cliquez dans la gouttière de l’éditeur en regard des numéros de ligne pour définir des points d’arrêt dans votre code.
  2. Appuyez sur F5 : Cela lancera l’Extension Development Host en mode débogage.
  3. Déclencher votre extension : Exécutez la commande ou l’action qui déclenche le code que vous souhaitez déboguer.
  4. Inspecter les variables et la pile d’appels : Le débogueur VS Code mettra en pause l’exécution à vos points d’arrêt, ce qui vous permettra d’inspecter les variables, de parcourir le code pas à pas et d’examiner la pile d’appels.

Travailler avec l’API VS Code

L’API VS Code fournit un riche ensemble d’interfaces et de fonctions pour interagir avec l’éditeur. Voici quelques domaines clés de l’API :

Exemple : Création d’une extension d’extrait de code

Créons une extension qui ajoute un extrait de code pour la création d’un composant React de base :

  1. Créer un dossier `snippets` : Créez un nouveau dossier nommé `snippets` à la racine de votre projet.
  2. Créer un fichier d’extrait de code : Créez un fichier nommé `react.json` dans le dossier `snippets`.
  3. Ajouter la définition de l’extrait de code : Ajoutez le JSON suivant à `react.json` :
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. Explication :
    • `"React Component"` : Le nom de l’extrait de code.
    • `"prefix": "reactcomp"` : Le préfixe qui déclenche l’extrait de code. Taper `reactcomp` et appuyer sur `Tab` insérera l’extrait de code.
    • `"body"` : Un tableau de chaînes représentant les lignes de code de l’extrait de code.
    • `${1:ComponentName}` : Une tabulation qui vous permet de modifier rapidement le nom du composant.
    • `"description"` : Une description de l’extrait de code.
  5. Modifier `package.json` : Ajoutez ce qui suit à la section `contributes` :
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Explication :
    • `"snippets"` : Définit les extraits de code que votre extension contribue.
    • `"language": "javascriptreact"` : Spécifie la langue pour laquelle l’extrait de code est applicable.
    • `"path": "./snippets/react.json"` : Spécifie le chemin d’accès au fichier d’extrait de code.
  7. Testez votre extrait de code : Ouvrez un fichier `.jsx` ou `.tsx` et tapez `reactcomp`. Appuyez sur `Tab` pour insérer l’extrait de code.

Techniques avancées de développement d’extensions

Une fois que vous maîtrisez les bases, vous pouvez explorer des techniques de développement d’extensions plus avancées :

Internationalisation et localisation (i18n et L10n)

Pour atteindre un public mondial, envisagez d’internationaliser et de localiser votre extension. Cela implique d’adapter votre extension pour prendre en charge différentes langues et régions.

Publication de votre extension

Une fois que votre extension est prête, vous pouvez la publier sur la Place de marché VS Code pour que d’autres l’utilisent :

  1. Créer une organisation Azure DevOps : Vous aurez besoin d’une organisation Azure DevOps pour publier votre extension. Si vous n’en avez pas, créez un compte gratuit sur le site Web Azure DevOps.
  2. Installer l’outil `vsce` : Le gestionnaire d’extensions VS Code (`vsce`) est un outil de ligne de commande permettant d’empaqueter et de publier des extensions. Installez-le globalement à l’aide de npm :
    3. npm install -g vsce
  3. Créer un éditeur : Un éditeur est une identité qui possède vos extensions sur la Place de marché. Créez un éditeur à l’aide de la commande `vsce create-publisher`. Vous devrez fournir un nom d’éditeur et un jeton d’accès personnel (PAT) à partir d’Azure DevOps.
  4. Générer un jeton d’accès personnel (PAT) : Dans Azure DevOps, accédez à « Paramètres utilisateur » -> « Jetons d’accès personnels » et créez un nouveau PAT avec l’étendue « Place de marché (Publier) ».
  5. Empaqueter votre extension : Utilisez la commande `vsce package` pour empaqueter votre extension dans un fichier `.vsix`.
  6. Publier votre extension : Utilisez la commande `vsce publish` pour publier votre extension sur la Place de marché. Vous devrez fournir le nom de votre éditeur et votre PAT.

Meilleures pratiques pour le développement d’extensions

Suivez ces meilleures pratiques pour créer des extensions VS Code de haute qualité et maintenables :

Ressources communautaires

Voici quelques ressources précieuses pour en savoir plus sur le développement d’extensions VS Code :

Conclusion

Le développement d’extensions VS Code est un moyen puissant de personnaliser votre environnement de codage, d’accroître votre productivité et de partager vos solutions avec la communauté mondiale des développeurs. En suivant ce guide complet, vous pouvez maîtriser l’art du développement d’extensions et créer des outils innovants qui améliorent l’expérience VS Code pour vous et pour les autres. N’oubliez pas d’adopter la communauté, de contribuer aux projets open source et d’apprendre et d’explorer en permanence le monde en constante évolution du développement d’extensions VS Code. Bonne chance et bon codage !