Tutoriel moderne de développement d’extensions VS Code : créer une extension sécurisée

Le succès et l’influence considérables de Microsoft Visual Studio (VS) Code s’expliquent en grande partie par son extensibilité. Souvent présenté comme un éditeur de code, il peut offrir bien plus si vous disposez des connaissances et des extensions adaptées. Vous pouvez, par exemple, l’utiliser comme navigateur web, traitement de texte ou système de gestion de fichiers. Microsoft encourage également les développeurs à tirer parti de l’extensibilité de VS Code en rendant l’API VS Code aussi accessible que possible.

Le développement d’extensions VS Code a beaucoup évolué depuis la première publication de l’outil en 2016. Il est désormais plus simple et plus convivial pour les développeurs. Cependant, vous devez connaître certaines pratiques et considérations particulières avant de commencer à créer votre propre extension.

Dans notre premier article sur le développement moderne d’extensions VS Code, nous avons présenté les bases du développement pour VS Code, notamment son architecture et les différents types d’extensions que vous pouvez créer. Cet article vous aidera à mettre ces connaissances en pratique en vous montrant comment créer et coder votre propre extension VS Code.

Créer une extension VS Code

Dans ce tutoriel, vous apprendrez à créer une extension multifonctionnelle pour VS Code et à mettre en œuvre différents types d’extensions. Vous trouverez le projet terminé dans ce dépôt GitHub.

Créer l’ossature de votre projet d’extension VS Code

Quelques éléments sont nécessaires pour suivre ce tutoriel. En plus de VS Code, VS Codium ou VS Code Insiders, veillez à installer les outils suivants :

• Node.js

• Git

Vous les utiliserez pour installer Yeoman et le générateur d’extensions VS Code. Ce générateur crée une structure de base pour votre extension, afin que vous n’ayez pas à tout écrire de zéro. Si vous choisissez TypeScript pour créer votre projet (recommandé dans cet article), il est conseillé d’installer TypeScript + Webpack Problem Matcher pour faciliter la détection et la localisation des erreurs de code.

Une fois Node.js et Git installés, ouvrez l’interpréteur de ligne de commande de votre choix (Invite de commandes, PowerShell, Terminal, etc.), puis exécutez la commande suivante :

npm install -g yo generator-code

L’installation de Yeoman et de son générateur d’extensions VS Code prend quelques instants :

Une fois l’installation terminée, accédez dans votre terminal au dossier de votre projet (l’emplacement où vous souhaitez le conserver), puis exécutez la commande suivante :

yo code

Cette commande lance l’interface CLI de Yeoman, qui vous demande de choisir le type de projet à créer. Il est recommandé de sélectionner l’option New Extension (TypeScript). Toutefois, si vous préférez JavaScript, choisissez la deuxième option :

Le générateur vous demande ensuite de nommer votre extension. Choisissez un nom simple, comme « Mes outils d’édition ». Vous devez également saisir un identifiant pour votre extension, par exemple editor-tools.

Utilisez la description suivante pour votre extension : « Une collection d’outils d’édition simples pour VS Code. » Indiquez ensuite si vous souhaitez initialiser un dépôt Git pour votre projet. Vous pouvez également choisir de l’initialiser manuellement plus tard.

À ce stade, vous devez indiquer si vous souhaitez regrouper votre code source avec webpack. Confirmez, puis sélectionnez npm comme gestionnaire de paquets :

Le générateur d’extensions prend quelques instants pour créer la structure de votre projet. Une fois cette étape terminée, il vous demande si vous souhaitez ouvrir le projet dans l’édition de VS Code disponible sur votre système. Confirmez en appuyant sur Entrée. Le code source du projet s’ouvre alors dans une nouvelle fenêtre VS Code :

Remarque : Ce tutoriel utilise Visual Studio Code 1.79, npm 9.5.1 et Yeoman 4.3.1. Le processus d’initialisation du projet peut donc légèrement varier selon les versions que vous utilisez. Adaptez les étapes au besoin. Si vous préférez une interface graphique aux CLI, installez Yeoman Application Wizard pour vos prochains projets.

Préparer le projet

Selon la version de Yeoman que vous utilisez, la structure du projet peut faire référence au module vscode dans le fichier package.json. Bien que ce module soit encore largement utilisé, il a été abandonné pour des raisons de sécurité. Si c’est votre cas, veillez à mettre à jour votre projet.

Pour préparer le projet, commencez par vérifier que le paquet @types/vscode est installé et déclaré comme dépendance de développement dans votre projet. Dans l’explorateur VS Code, ouvrez le fichier package.json de votre projet, qui contient toutes ses dépendances.

Une fois le fichier package.json ouvert, faites défiler la page jusqu’à l’objet `"devDependencies"`. Vérifiez que la clé et la valeur "@types/vscode": [version], y sont définies :

Vous devez également vérifier que le numéro de version du paquet @types/vscode correspond à la version du moteur VS Code. Pour cela, remontez dans le fichier package.json jusqu’à l’objet "engines". Le numéro de version du moteur VS Code figure à côté de la clé "vscode" :

Si le numéro de version de @types/vscode ne correspond pas à celui du moteur, modifiez manuellement le numéro de version de @type/vscode pour qu’il corresponde.

Si le paquet @types/vscode est absent du fichier package.json`, ne tentez pas de le télécharger et de l’ajouter manuellement. Utilisez npm pour installer et configurer les paquets nécessaires : ouvrez votre terminal de ligne de commande et accédez au dossier racine de votre projet (cd editor-tools). Saisissez ensuite la commande suivante et exécutez-la :

npm install --save-dev @types/vscode

Vérifiez à nouveau le fichier package.json et assurez-vous qu’il fait référence à tous les modules nécessaires. Rappelons que l’objectif est de vérifier que votre projet utilise le bon module vscode, afin de vous assurer que vous utilisez les bibliothèques les plus sécurisées pour écrire votre extension. Votre extension personnalisée est ainsi sécurisée.

La décision de mettre à jour et de scinder l’ancien paquet npm de VS Code en deux paquets distincts s’explique par plusieurs facteurs. L’une des raisons majeures était que le paquet d’origine incluait des dépendances transitives vers un paquet compromis appelé event-stream. Cette décision visait à renforcer la sécurité des modules VS Code, mais aussi à améliorer les performances, réduire la complexité et introduire de nouvelles fonctionnalités.  

 Cependant, vous devriez également effectuer quelques vérifications préliminaires de sécurité et de qualité sur votre projet. Vous pourrez ainsi vous assurer que sa structure a été créée correctement et de manière sécurisée.

Vérifier votre projet

Pour vérifier la sécurité de l’installation de votre projet, vous pouvez utiliser Snyk. Le moyen le plus simple d’intégrer les outils Snyk à vos flux de travail VS Code consiste à installer l’extension Snyk après avoir créé un compte Snyk gratuit.

Une fois l’extension Snyk installée, ouvrez la fenêtre Extensions et recherchez « Snyk ». Veillez à installer la version release, qui devrait apparaître en premier dans les résultats :

Vous pouvez également ajouter l’extension officielle Snyk depuis la version web de Visual Studio Code Marketplace.

Une fois l’installation terminée, authentifiez-vous et connectez votre extension VS Code à votre compte Snyk. Cliquez sur le badge Snyk dans la barre latérale principale, puis sur Trust workspace and connect :

Votre navigateur web par défaut devrait ouvrir la page d’authentification Snyk. Cliquez sur le grand bouton vert Authenticate. Une fois l’authentification réussie, Snyk affiche un message vous informant que votre compte est authentifié et que Snyk est prêt à l’emploi.

Il est recommandé de consulter la documentation officielle sur la configuration de l’extension Snyk pour VS Code afin de configurer votre extension en conséquence. Il est également conseillé de recharger ou de redémarrer VS Code après ces modifications. Revenez ensuite à l’interface de l’extension Snyk dans VS Code, puis cliquez sur le bouton Enable Snyk Code and Start Scanning (s’il n’est pas disponible, consultez la remarque ci-dessous).  

Remarque : Si le bouton n’est pas disponible, Snyk devrait lancer automatiquement l’analyse de votre projet. VS Code peut également vous demander de confirmer que vous faites confiance au dossier du projet. C’est normal. Si vous y êtes invité, cliquez sur le bouton Trust Folder and Continue.

Si vous utilisez la configuration par défaut de l’extension Snyk, celle-ci devrait lancer automatiquement les analyses Open Source Security et Configuration. Un bouton intitulé Enable Snyk Code and start analysing devrait apparaître dans la section Code Security and Quality du panneau Snyk. VS Code peut également afficher un bouton Enable Snyk Code :

Cliquer sur l’un ou l’autre des boutons ouvre la page Snyk Code Settings. Vous y trouverez une brève description de Snyk Code. Après l’avoir lue, cliquez sur Save changes : 

Revenez à l’interface VS Code et au panneau Snyk. Après quelques instants, les sections Code Security et Code Quality devraient apparaître dans le panneau Snyk et l’analyse devrait commencer. 

Notez que le panneau de l’extension comporte quatre parties :

1. Sécurité Open Source

2. Sécurité du code

3. Configuration

4. Qualité du code

Si les fonctionnalités Code Security et Code Quality ne lancent pas automatiquement l’analyse, vous devrez peut-être cliquer sur le bouton Play à côté de leurs titres. Ce bouton Play apparaît lorsque vous survolez une section et vous permet de relancer l’analyse du projet :

Après votre première analyse, les résultats du scanner Open Source Security and Configuration devraient être négatifs (aucune vulnérabilité ni aucun problème détecté). En revanche, les analyses Code Security et Code Quality signaleront certains problèmes et vulnérabilités :

Développez les résultats de l’analyse pour afficher plus de détails. La plupart des problèmes sont négligeables, car ils se trouvent dans vos dépendances. Vous pouvez modifier ces fichiers, mais il est préférable de ne pas en tenir compte.

Parcourez les alertes dans le panneau Analysis Results, puis ignorez-les ou définissez des exceptions si nécessaire (par exemple, pour des modules de projet externes). Maintenant que le projet est prêt, exécutez l’extension pour voir le résultat.

Exécuter votre extension

Pour exécuter votre extension, utilisez l’explorateur VS Code pour accéder au fichier Editor-Tools/src/extension.ts. Si vous connaissez les modèles de conception orientée objet des langages de programmation tels que C# et Java, ce fichier joue un rôle similaire à celui d’une classe main.

Votre fichier extension.ts devrait contenir l’exemple de code généré par le générateur de code d’extensions VS Code de Yeoman. Appuyez sur la touche F5 pour tester ce code, ainsi que les modifications apportées dans la section précédente.

Remarque : VS Code peut vous demander de spécifier une tâche de compilation. Cela se produit généralement lorsqu’aucune tâche par défaut n’a été définie dans votre fichier tasks.json. Le cas échéant, sélectionnez npm: compile comme tâche de compilation.

Avant de lancer l’Extension Development Host, VS Code peut afficher une boîte de dialogue d’erreur indiquant que des erreurs sont survenues après l’exécution de la tâche de pré-lancement npm: watch. C’est tout à fait normal. Cochez la case Remember my choice in user settings, puis cliquez sur le bouton Debug Anyway :

Une fois l’Extension Development Host lancé, ouvrez sa Command Palette en appuyant sur Ctrl + Shift + P (sous Windows) ou sur Shift + Command + P (sous Mac). Saisissez ensuite la commande Hello World dans le champ de texte de la Command Palette. Un petit message contextuel s’affiche alors dans le coin inférieur droit :

Veillez à fermer l’Extension Development Host pour mettre fin à la session d’exécution et de débogage de l’extension. Dans la section suivante, vous allez enfin pouvoir créer votre extension.

Créer et modifier votre extension

Dans cette section, vous allez créer une fonctionnalité simple permettant d’ajouter du texte à l’éditeur actif de VS Code. Son fonctionnement est similaire à celui de la saisie semi-automatique dans des applications comme Excel.

Pour commencer, cliquez sur l’explorateur de fichiers de VS Code, puis ajoutez un nouveau fichier au répertoire du code source de votre projet (SRC), nommé AutoFillExtension.ts :

Ajoutez le code suivant à votre fichier AutoFillExtension.ts :

1import * as vscode from 'vscode';
2
3export function autofillMyAddress() {
4    //Retrieve the currently active text editor
5    const editor = vscode.window.activeTextEditor;
6    //Check if the editor is undefined
7    if (editor) {
8        //Insert text at the current position using an edit builder
9        editor.edit(editBuilder => {
10            editBuilder.insert(editor.selection.active,'Street 6260-112 Glenwood Ave'
11            +'\nCity/Town   Raleigh'
12            +'\nState/Province/Region   Nebraska'
13            +'\nZip/Postal Code 27612'
14            +'\nPhone Number    (919) 785-2864'
15            +'\nCountry United States'
16            +'\nLatitude    35.859171'
17            +'\nLongitude   -78.703853');
18        });
19    }
20}

Ce code déclare et exporte une fonction nommée autoFillMyAddress. Celle-ci récupère l’éditeur de texte actuellement actif (le panneau de l’éditeur qui a le focus dans la fenêtre) à l’aide de l’espace de noms window de l’API VS Code. Elle vérifie qu’un éditeur est bien actif avant d’y ajouter du texte (une fausse adresse générée aléatoirement), à l’aide d’une instance de la classe TextEditorEdit.

Une fois votre extension créée, vous devez l’enregistrer et l’appeler. Pour ce faire, utilisez l’explorateur de fichiers de VS Code pour accéder à votre fichier package.json. Vous devez ajouter un point de contribution afin que la fonctionnalité de votre extension puisse être appelée sous forme de commande depuis l’interface de VS Code.

Faites défiler lentement le fichier package.json jusqu’à l’objet "contributes". Remplacez le tableau "command" et ses valeurs par le code suivant :

"commands": [
    {
        "command": "editor-tools.fillAddress",
        "title": "Fill Address"
    }
]

Revenez au fichier extension.ts de votre projet et remplacez son contenu par le code suivant :

1// The module 'vscode' contains the VS Code extensibility API
2// Import the module and reference it with the alias vscode in your code below
3import * as vscode from 'vscode';
4import * as autofill from './AutoFillExtension';
5
6// This method is called when your extension is activated
7// Your extension is activated the very first time the command is executed
8export function activate(context: vscode.ExtensionContext) {
9    let disposable = vscode.commands.registerCommand('editor-tools.fillAddress',autofill.autofillMyAddress);
10
11    context.subscriptions.push(disposable);
12}
13
14// This method is called when your extension is deactivated
15export function deactivate() {}

Ce code importe le module AutoFillExtension sous la forme d’un objet autofill. Il utilise ensuite activate pour enregistrer la commande de l’extension et l’ajouter à la liste des abonnements de ExtensionContext. Une fois l’extension désactivée, VS Code la supprime.

Vous pouvez maintenant déboguer ou exécuter votre extension (F5). Pour l’utiliser, ouvrez ou créez un fichier (de n’importe quel type) que vous pouvez modifier. Ouvrez ensuite la palette de commandes et saisissez la commande Fill Address :

Nous allons maintenant faire passer votre extension au niveau supérieur en exploitant les fonctionnalités de diagnostic de VS Code. Grâce à cette fonctionnalité supplémentaire, votre extension peut vérifier si le document actuel répond à un critère précis. Dans le cas contraire, elle affiche un message d’erreur.

Fermez l’Extension Development Host, puis créez une nouvelle extension nommée LineDiagnosticExtension.ts dans le dossier src et ajoutez-y le contenu suivant :

1import * as vscode from 'vscode';
2
3export function updateDiagnostic(collection: vscode.DiagnosticCollection) {
4    //clears previous errors
5    collection.clear;
6    //fetches current active text editor
7    let editor = vscode.window.activeTextEditor;
8    //ensures that active text editor is not undefined
9    if (editor) {
10        //fetches the document from the active text editor
11        let document = editor.document;
12        //fetches the number of lines
13        let lineCount = document.lineCount;
14        //verifies that the line count is not less than 8
15        if (lineCount < 8) {
16            //specifies the range to highlight and display errors over
17            const diagnosticrange = new vscode.Range(new vscode.Position(0, 0), new vscode.Position(lineCount-1, 10));
18            //sets the properties of VSCode's diagnostic features
19            collection.set(document.uri, [{
20                code: '',
21                message: 'Document has only ' + lineCount + ' line(s). The document must have at least 8 lines',
22                range: diagnosticrange,
23                severity: vscode.DiagnosticSeverity.Error,
24                source: '',
25                relatedInformation: [
26                    new vscode.DiagnosticRelatedInformation(new vscode.Location(document.uri, new vscode.Range(new vscode.Position(0, 0), new vscode.Position(7, 10))), 'Line Count')
27                ]
28            }]);
29        } else {
30            //if the line count is equal to or greater than 8, it clears all error messages
31            collection.clear();
32
33        }
34
35    }  
36
37}    

Ce fichier contient et exporte une seule fonction : updateDiagnostic(). Elle accepte un seul argument : DiagnosticCollection. La fonction utilise la propriété lineCount du module TextDocument pour renvoyer le nombre de lignes du document actuellement actif. Si ce nombre est inférieur à huit, elle affiche un message d’erreur à l’aide des fonctionnalités de diagnostic de VS Code. Celui-ci apparaît dans une fenêtre contextuelle et dans le panneau Problèmes.

Vous devez ensuite appeler UpdateDiagnostic() et l’enregistrer dans votre extension. Ouvrez le fichier extension.ts et remplacez son contenu par le code suivant :

1// The module 'vscode' contains the VS Code extensibility API
2// Import the module and reference it with the alias vscode in your code below
3import * as vscode from 'vscode';
4import * as autofill from './AutoFillExtension';
5import * as linelimit from './LineDiagnosticExtension';
6
7// This method is called when your extension is activated
8// Your extension is activated the very first time the command is executed
9export function activate(context: vscode.ExtensionContext) {
10    //create a new diagnostic collection
11    const collection = vscode.languages.createDiagnosticCollection('line count diagnostics');
12    vscode.commands.registerCommand('editor-tools.fillAddress',autofill.autofillMyAddress);
13
14    //Initial run of the upDateDiagnostic method
15    linelimit.updateDiagnostic(collection);
16
17    //Subscribes a new event handler that activates when an edit or change is performed on a workspace document  
18    context.subscriptions.push(vscode.workspace.onDidChangeTextDocument(editorchangeevent => {      
19        if (editorchangeevent) {
20            linelimit.updateDiagnostic(collection);
21        }
22    }));
23
24}
25
26// This method is called when your extension is deactivated
27export function deactivate() {}

Ce code importe LineDiagnosticExtension.ts sous l’alias linelimit. Il définit ensuite une nouvelle DiagnosticCollection. Cette opération n’est exécutée qu’une seule fois, lors de l’appel de la fonction activate. Après avoir enregistré la commande Fill Address, le code appelle la fonction updateDiagnostic(), qui s’exécute également une seule fois à l’ouverture de VS Code.

Pour mettre à jour les informations de diagnostic de VS Code, vous devez surveiller les modifications apportées au document. C’est pourquoi ce code enregistre un gestionnaire d’événements nommé OnDidChangeTextDocument(), qui appartient à l’espace de travail et surveille toutes les modifications apportées aux documents de l’espace de travail actuel.

Le gestionnaire d’événements exécute ensuite la méthode linelimit.updateDiagnostic. Comme vous avez deux extensions différentes, vous devez enregistrer les deux. Dans l’exemple précédent, l’extension Fill Address et sa commande ne sont enregistrées et ajoutées à la liste des abonnements que lorsque vous exécutez la commande depuis la palette de commandes. Ici, en revanche, vous voulez que l’extension soit activée au démarrage de VS Code.

VS Code vous permet de définir ce que l’on appelle des événements d’activation. Vos extensions ne sont activées que lorsqu’un événement d’activation se produit.

Ouvrez le fichier package.json de votre projet. Faites défiler jusqu’au tableau activationEvents et ajoutez "*" comme valeur (entre les crochets). VS Code activera ainsi toutes vos extensions à chaque événement d’activation. Cette pratique est généralement déconseillée, car elle ralentit le démarrage de VS Code. Toutefois, ces deux extensions étant simples, elles ne devraient pas affecter ce projet :

  "activationEvents": [
    "*"
  ],

Vous pouvez enfin exécuter et tester votre extension. Pour cela, créez un nouveau fichier texte et saisissez du texte au hasard dans la zone de texte. VS Code devrait le souligner en rouge et afficher un message dans le panneau des problèmes :

L’ajout de huit lignes supplémentaires devrait faire disparaître le message d’erreur. Vous pouvez aussi utiliser la méthode Fill Address pour gagner du temps :

Relancez ensuite Snyk pour vérifier la qualité et la sécurité de votre projet. Examinez les résultats de l’analyse en ignorant les alertes qui ne concernent pas les fichiers du projet que vous avez créés. Si vous recevez des notifications pertinentes, suivez les recommandations de Snyk pour y remédier. Maintenant que vous avez vérifié la qualité et la sécurité de votre extension et de ses dépendances, vous pouvez la publier.

Empaqueter votre extension

Microsoft simplifie l’empaquetage et la publication grâce à son CLI VS Code Extensions (VSCE). Cet outil vous permet de ne pas publier votre extension sur Visual Studio Code Marketplace. Vous pouvez plutôt l’empaqueter dans un fichier VSIX et le partager ainsi. Vous avez besoin de npm pour installer le CLI VSCE.

Ouvrez le terminal de ligne de commande de votre choix et exécutez la commande npm suivante (vous n’avez pas besoin de l’exécuter dans un répertoire précis) :

npm install -g @vscode/vsce

Une fois VSCE installé, accédez au dossier de votre extension et exécutez la commande suivante :

vsce package

Si vous avez choisi de ne pas initialiser de dépôt GitHub pour votre extension, vous pourriez voir quelques avertissements. Vous pouvez les ignorer en sélectionnant simplement l’option yes :

L’empaquetage ne devrait pas prendre trop de temps. Une fois terminé, vous trouverez un nouveau fichier à la racine de votre projet, nommé editor-tools-0.0.1.vsix (ou similaire) :

Vous pouvez utiliser ce fichier pour installer votre extension dans votre version de VS Code. Ouvrez VS Code et accédez au panneau des extensions. Cliquez sur l’icône de menu représentant des points de suspension en haut (Views and More Actions), puis sélectionnez Install from VSIX :

Une fenêtre de sélection de fichiers s’ouvre. Recherchez et sélectionnez votre extension, puis cliquez sur le bouton Install :

Une fois l’installation terminée, VS Code affiche une notification dans le coin inférieur droit de l’écran :

Vous devriez maintenant pouvoir accéder aux fonctionnalités de votre extension depuis votre version de VS Code.

Publier votre extension

S’il s’agissait d’une extension que nous souhaitions réellement publier sur Visual Studio Code Marketplace, ce serait le moment de le faire. Au lieu de publier cet exemple d’extension, nous allons simplement vous présenter les étapes, sans vous demander de les suivre.

Remarque : Nous vous déconseillons de suivre cette étape, car nous ne voulons pas inonder Marketplace d’applications de démonstration. Vous pouvez toutefois vous reporter aux étapes suivantes si vous développez un jour une extension destinée au grand public.

Pour publier votre package, vous devez créer un compte Azure DevOps pour votre organisation, puis l’utiliser pour obtenir un jeton d’accès personnel.

Vous pouvez créer un nouvel éditeur depuis la page de gestion des éditeurs de Visual Studio Code Marketplace. Notez que le nom de l’éditeur et son nom d’affichage doivent être uniques.

Après avoir créé un éditeur, ajoutez une clé et une valeur d’éditeur à votre fichier package.json. L’entrée doit utiliser le nom de l’éditeur, et non son nom d’affichage :

"publisher": "publisher name" //Publisher name and value

"name": "editor-tools",
"displayName": "My Editor Tools",
"description": "A collection of simple editing tools for VSCode",
"version": "0.0.1",

Connectez-vous ensuite à VSCE avec le nom (ID) de votre éditeur et votre jeton d’accès personnel :

vsce login <publisher ID>

Une fois connecté, vous pouvez publier votre extension avec VSCE en exécutant la commande suivante à la racine du projet de votre extension :

vsce publish

Vous pouvez également téléverser manuellement le fichier VSIX sur la page de gestion des éditeurs de Visual Studio Code Marketplace. Si vous avez choisi de ne pas regrouper votre extension lors de sa création, vous pouvez le faire manuellement avec webpack ou esbuild. Le regroupement peut améliorer l’efficacité et le temps de chargement de votre extension.

Le regroupement n’est peut-être pas nécessaire dans ce cas, mais il pourrait l’être pour vos futurs projets. Avant de regrouper votre code, vérifiez que toutes les dépendances de votre projet sont sécurisées. Analyser vos projets avec Snyk permet de vérifier rapidement que les bibliothèques et modules utilisés sont sûrs.

En outre, les technologies et la cybersécurité évoluent constamment. Même sécurisées aujourd’hui, vos dépendances pourraient ne plus l’être demain. Heureusement, vous pouvez utiliser Snyk pour surveiller en continu les dépendances de vos projets. Si Snyk détecte des vulnérabilités potentielles, vous recevez des notifications par e-mail ou sur Slack.

Conclusion

Dans ce tutoriel, vous avez appris à créer une extension simple pour VS Code. Vous avez notamment appris à initialiser le projet avec le générateur VSCE de Yeoman. Vous avez ainsi découvert la structure de base d’une extension, comment enregistrer et activer différents types d’extensions avec le manifeste d’extension (package.json), et comment empaqueter, regrouper et publier votre extension.

Que vous travailliez sur des extensions VS Code ou des applications web complexes, vous devez prendre la cybersécurité au sérieux. Ce n’est toutefois pas toujours facile, surtout avec l’adoption croissante de l’intégration continue et du développement continu (CI/CD). Pour vous aider, Snyk propose des contrôles automatisés de la qualité et de la sécurité du code, qui garantissent le respect des dernières normes du secteur. Avec Snyk, vous n’avez plus à craindre de prendre du retard sur les tendances de la cybersécurité et les bonnes pratiques de codage sécurisé : la plateforme s’en charge pour vous.