Histoire de 33 extensions pour VS Code, de leur développement et comment les gérer

L'auteur du matériel, dont nous publions la traduction aujourd'hui, a créé 33 extensions pour VS Code. Il a décidé de partager avec ceux qui aiment cet éditeur, les méthodes de développement et de support des extensions. De plus, il a brièvement parlé de ses projets. Vous trouverez peut-être parmi eux quelque chose qui vous sera utile.

Comment écrire des extensions

Je cherche un travail productif et j'aime l'automatisation, j'ai donc développé un processus bien organisé pour développer des extensions pour VS Code. Je vais vous parler des principaux éléments de ce processus.

▍Outils

J'ai écrit un outil très simple qui vous aide à démarrer rapidement sur de nouveaux projets en utilisant un modèle. L'utilitaire correspondant fonctionne comme ceci:

• Il accepte un dossier en entrée (c'est ce qu'on appelle un «modèle»).
• Il traite tous les fichiers à l'aide du package de guidon , posant au cours du traitement des questions sur ce qui doit être substitué pour chaque espace réservé trouvé (comme {{name}} ).
• En conséquence, elle forme un nouveau dossier, dont les fichiers contiennent ce qui a été entré en réponse à ses questions.

J'ai pensé à utiliser l'utilitaire yeoman pour travailler avec des modèles, mais, pour mes besoins, cela semble déraisonnablement compliqué. J'ai utilisé l'outil khaos , mais il n'est pas pris en charge et ne met pas à jour les modèles automatiquement, et les mettre à jour manuellement chaque fois que je dois les utiliser n'est pas particulièrement pratique.

▍Modèle

C'est ainsi que, en utilisant l' extension template-vscode-extension , j'ai commencé à développer une nouvelle extension pour VS Code.


Créer un nouveau projet

Une fois que les réponses aux questions du programme ont été entrées, j’ai à ma disposition une extension fonctionnelle, quelque chose comme "Bonjour, mon monde!" pour VS Code. Le modèle comprend de nombreuses fonctions d'assistance que, comme il s'est avéré, j'utilise souvent lors du développement d'extensions. En particulier, le modèle prend en charge le chargement du fichier de configuration utilisateur à partir du dossier .vscode , l'enregistrement automatique des commandes, il peut trouver le répertoire racine actuel en fonction du fichier actif et résoudre d'autres problèmes similaires.

Si je pouvais revenir en arrière, je mettrais probablement toutes ces fonctions d'assistance dans un package autonome, dans quelque chose comme vscode-utils , au lieu de faire des copies de ces fonctions dans chaque projet de développement d'extension. Mais alors, malheureusement, je ne savais pas que je créerais des dizaines d'extensions. Maintenant, je dois passer du temps à mettre à jour le code correspondant dans tous les projets de mes extensions.

Si vous prévoyez de développer des extensions pour VS Code, je vous conseillerais de créer votre propre modèle, en prenant peut-être le mien comme base.

▍ Documentation utile

Pendant le processus de développement, j'ai toujours à portée de main la documentation de l'API VS Code. Au début, travailler avec ce document, qui est une énorme page, n'est pas particulièrement pratique, mais si vous prenez le temps de l'examiner rapidement, si vous comprenez quelles API sont à votre disposition, il sera confortable à utiliser. En général, je peux noter que l'ensemble des API disponibles me convient parfaitement.

Et au fait, si vous souhaitez développer des extensions pour VS Code, il vous sera extrêmement utile de lire cette section de la documentation.

▍À propos des extensions que j'ai développées

Je développe des extensions pour résoudre divers problèmes, nous en parlerons ci-dessous. De plus, certaines de ces extensions m'aident à développer d'autres extensions.

Mes extensions

Comme je l'ai dit, je m'efforce de gagner en productivité, donc bon nombre de mes extensions visent à augmenter la productivité du travail. J'essaie de ne pas faire face à l'invention constante du vélo, j'essaie de réaliser une séparation claire des fonctions entre les différentes extensions afin que leur utilisation conjointe ne pose pas de problème.

Je ne sais pas si c'est bon ou mauvais, mais j'aime créer des extensions pour VS Code. De plus, le flux de tâches pouvant être automatisé ne se dessèche pas. C'est pourquoi j'ai, après avoir écrit la première extension, effectué la deuxième, puis la troisième, atteignant, par conséquent, jusqu'au trente-troisième.

Je vais maintenant parler brièvement de mes extensions. Les détails à leur sujet peuvent être trouvés sur leurs pages.

▍ Extensions pour créer des extensions

N ° 1. Gestionnaire de débogage

L'extension Debug Manager vous permet de démarrer le débogage, même à partir du terminal, sans avoir besoin de créer des tâches ou des fichiers de configuration. J'ai créé cette extension parce que je ne voulais pas obstruer les référentiels avec des fichiers inutiles (et qui, par exemple, utilise des tâches?). Je crois que le lancement du débogueur à partir du terminal est une fonctionnalité tellement utile qu'il devrait être inclus dans VS Code lui-même.


Exécution du débogueur à partir du terminal

N ° 2. Débogueur StatusBar

L'extension StatusBar Debugger ajoute des contrôles de débogage à la barre d'état du programme. C'est beaucoup plus pratique que le panneau de débogage standard. De plus, si VS Code fournissait plus de données de débogage , mon extension serait encore meilleure.

Numéro 3. Installez .VSIX

L' extension Installer .VSIX vous permet d'installer des fichiers .vsix directement à partir du panneau de l' . La raison de cette extension était le fait que la procédure d'installation standard pour de tels fichiers n'est pas pratique .

Numéro 4. Bump

L'extension Bump vous permet d'augmenter le numéro de version du projet et d'entrer de nouvelles données dans le journal des modifications. Cet outil agit selon sa propre logique interne, mais peut être personnalisé. Je l'ai créé parce que toute extension décente a besoin d'un journal des modifications, mais cela ne signifie pas que le développeur d'une telle extension doit entrer le journal manuellement. Ceci est l'une de mes extensions préférées. Je vais peut-être créer un outil en ligne de commande basé sur celui-ci, car j'aimerais qu'il autorise un jour l'automatisation des versions de GitHub.


Utilisation de l'extension Bump

N ° 5. Optimiser les images

L'extension Optimiser les images vous permet d'optimiser les images disponibles dans le projet à l'aide d'une application externe sélectionnée par l'utilisateur. Une équipe - et le travail est fait.

▍ Gestion de projet

N ° 6. Projets +

L'extension Projets + est utilisée pour gérer les projets. Il a de riches capacités, peut être configuré, trouve automatiquement des projets. L'une des extensions de ce type les plus utilisées est Project Manager , mais j'ai une centaine de référentiels et j'ai besoin des bons outils pour les gérer, dont l'un prend en charge des groupes d'imbrication illimités.


Utilisation de l'extension Project +

▍Gestion des listes de tâches

Numéro 7. Todo +

L'extension Todo + simplifie le travail avec les listes de tâches. Il s'agit d'un outil puissant, facile à utiliser et personnalisable. Si vous n'avez pas besoin de surligner la syntaxe pour les fichiers TODO , ou si vous êtes satisfait de la surbrillance intégrée standard, vous pouvez essayer la belle extension Todo Tree .


Mise en évidence de la syntaxe à l'aide de Todo + et des informations au niveau du projet

Numéro 8. Souligner

L'extension Highlight est un outil avancé de mise en évidence de la syntaxe des expressions régulières. Il est utile pour travailler avec des listes de tâches, des annotations, etc. L'extension TODO Highlight est très populaire dans ce domaine, mais mon extension est plus polyvalente et beaucoup plus puissante. De plus, cela fonctionne probablement plus rapidement.

N ° 9. Tâche de démarque

L' extension Markdown Todo facilite l'utilisation des listes de tâches dans les fichiers de démarques. Il n'y a rien de spécial à ce sujet, mais il vous permet d'utiliser les capacités de Todo + dans les fichiers de démarque.

N ° 10. Projets + Todo +

L'extension Projets + Todo + vous permet d'analyser des projets, pour ainsi dire, à vol d'oiseau, pour voir le résultat de l'agrégation de tous les todo-fichiers dans un seul fichier. Si vous utilisez l'extension Projects + pour la gestion de projet et Todo + pour travailler avec des listes de tâches, alors grâce à cette extension, vous pouvez collecter des listes de tâches de tous (ou de certains) projets en un seul endroit.

▍Expans pour ouvrir des fichiers

L'important pour moi est la possibilité de basculer rapidement entre différentes applications ou pages Web. C'est pourquoi j'ai créé une série d'extensions pour VS Code qui simplifient la solution de ces problèmes.

N ° 11. Ouvert en application

L'extension Ouvrir dans l'application vous permet d'ouvrir des fichiers arbitraires dans l'application par défaut ou dans l'application que le développeur décide d'utiliser. Il s'agit d'une extension universelle.

N ° 12. Ouvrir dans les navigateurs

L' extension Ouvrir dans les navigateurs ajoute des commandes à l'éditeur qui vous permettent d'ouvrir le fichier ou le projet en cours dans n'importe quel navigateur, ou même immédiatement dans tous les navigateurs disponibles.

N ° 13. Ouvrir dans le code

L'extension Open in Code facilite le basculement entre VS Code et VS Code Insiders.

N ° 14. Ouvrir dans le Finder

L'extension Ouvrir dans le Finder est conçue pour ouvrir le fichier ou le projet en cours dans le gestionnaire de fichiers du Finder.

Numéro 15. Ouvrir dans github

L'extension Ouvrir dans GitHub vous permet d'ouvrir le projet ou le fichier en cours sur github.com. Il existe de nombreuses extensions pour résoudre ce problème, mais quand je les ai essayées, il s'est avéré qu'elles ont trop de fonctions dont je n'ai pas besoin.

N ° 16. Ouvert dans gittower

L' extension Ouvrir dans GitTower ajoute une commande à l'éditeur pour ouvrir le projet en cours dans GitTower .

Numéro 17. Ouvert sur le marché

L'extension Open in Marketplace équipe l'éditeur pour ouvrir le projet en cours dans le répertoire d' extension de VS Code.

Numéro 18. Ouvrir dans node_modules

L' extension Ouvrir dans node_modules vous permet de trouver les modules correspondant au texte sélectionné ou à une ligne quelconque dans le dossier node_modules et d'ouvrir leurs dossiers. Il est utile dans les cas où le développeur souhaite mieux comprendre les modules qu'il utilise.

N ° 19. Ouvert en npm

L'extension Ouvrir dans NPM vous permet d'ouvrir des pages de module dans le répertoire npm. Il est pratique à utiliser pour afficher les informations d'aide des modules.

N ° 20. Ouvert en bateau

L'extension Ouvrir dans Ship ajoute une commande à l'éditeur pour ouvrir le projet en cours dans Ship. Malheureusement, Ship a cessé de fonctionner. Alors maintenant, pour ne pas oublier les informations que je reçois sur les problèmes de mes projets, je dois utiliser une feuille de rappel spéciale dans Noty .

N ° 21. Ouvrir dans le terminal

L'extension Ouvrir dans le terminal facilite l'ouverture du projet en cours dans le terminal.

Numéro 22. Ouvert en transmission

L'extension Ouvrir dans Transmit vous permet d'ouvrir le fichier ou le projet en cours dans Transmit .

▍ Divers

Numéro 23. Actualisation du navigateur

L'extension d'actualisation du navigateur vous permet d'actualiser la page dans le navigateur en appuyant sur ⌘R directement à partir de VS Code, sans avoir à basculer vers le navigateur. Cette extension est utile dans les cas où l'option de rechargement interactif ne peut pas être utilisée et lorsque vous n'avez pas besoin browser-sync actualiser la page sans que cela soit nécessaire .

Numéro 24. Commandes

L'extension Commands vous permet d'appeler des commandes arbitraires à partir de la barre d'état. Argument passant pris en charge.


Commandes personnalisées créées par des commandes

Numéro 25. Diff

L'extension Diff vous permet de comparer des fichiers ouverts. J'ai créé cette extension car la construction code-diff path1 path2 est trop lente.

N ° 26. Historique des fichiers Git

L'extension Git File History simplifie l'analyse des différences entre le fichier actuel et sa version précédente. Il existe de nombreuses extensions pour résoudre ce problème, mais lorsque je les ai essayées, elles se sont avérées être encombrées de fonctionnalités inutiles ou inopérantes.

Numéro 27. Notifications Github

L'extension GitHub Notifications sécurisée et personnalisable est conçue pour afficher les informations de notification GitHub sur la barre d'état.

N ° 28. Thème de la nuit Monokai

Monokai Night Theme est un thème sombre minimaliste basé sur le thème Monokai. Je l'ai créé car je ne pouvais pas choisir ce qui me convenait parmi les sujets existants.


Thème de la nuit Monokai

N ° 29. Non [non pris en charge]

L'extension No [Unsupported] est destinée à supprimer la ligne «[Unsupported]» de l'en-tête de l'éditeur. Cette extension est déjà déconseillée, je recommande donc plutôt de corriger les sommes de contrôle VSCode . Malheureusement, même après ceci et cette discussion, l'inscription ennuyeuse «[non pris en charge]» n'a pas disparu.

N ° 30. Ouvrir plusieurs fichiers

L'extension Ouvrir plusieurs fichiers vous permet d'ouvrir simultanément tous les fichiers d'un certain dossier. Si nécessaire, les fichiers peuvent être filtrés par modèle.

N ° 31. Recherche - Ouvrir tous les résultats

L'extension Rechercher - Ouvrir tous les résultats vous permet d'afficher simultanément tous les résultats de la recherche à l'aide d'une seule commande.

Numéro 32. Gestionnaire de terminaux

L'extension Terminals Manager automatise le travail avec plusieurs terminaux à la fois, par exemple, l'exécution de certaines commandes en eux. Je dois dire que Terminals Manager a été ma première extension. Si vous utilisez les terminaux - je vous recommande de l'essayer.

N ° 33. Transmettre

L'extension Transmit équipe l'éditeur de plusieurs commandes pour organiser l'interaction avec Transmit.

Gestion des extensions

La gestion de plusieurs référentiels peut être une tâche ardue. Je vais vous dire comment je fais.

▍ Commits récurrents

Tôt ou tard, le moment vient où vous devez apporter des modifications à tous les référentiels pris en charge. Cela se résume au fait que de nombreux référentiels doivent faire les mêmes commits. Très vite, cela devient une tâche ennuyeuse.

Afin d'automatiser la solution de ce problème, j'ai créé Autogit - un outil qui vous permet d'exécuter des commandes lorsqu'il est appliqué à de nombreux référentiels.


Exécution d'une commande à l'aide d'Autogit

Je trouve constamment de nouvelles façons d'utiliser autogit . Par exemple, récemment, en utilisant cet outil, j'ai apporté les modifications suivantes dans tous les référentiels dans lesquels le code de mes extensions pour VS Code est stocké:

• Construisez avec webpack . Cela a entraîné une amélioration de la vitesse de démarrage d'environ 80%.
• Ignorer le package-lock.json . Ce fichier obstrue uniquement mon historique de validation. Voici du bon matériel sur ce sujet.
• Mettez à jour tsconfig.json . J'utilise intensivement les nouvelles fonctionnalités du langage, en particulier les fonctions asynchrones. Ils sont transposés si la cible de la transpilation est fixée à <= es5 , à des constructions très lentes. Étant donné que VS Code comprend le code moderne, cela n'est plus nécessaire.
• Désinstallez TSLint . J'ai trouvé que, fondamentalement, je ne fais pas attention aux conseils du linter, alors je me suis débarrassé de cette opportunité.
• Utilisation d'un logo haute résolution dans les matériaux de référence. J'avais l'habitude d'utiliser le logo 128x128, maintenant, afin d'améliorer l'apparence des matériaux de référence, j'ai utilisé une meilleure image. Je ne peux pas dire que l'image elle-même est un miracle aussi bon, mais c'est une autre histoire.

Faire de telles modifications dans un référentiel n'est pas long, mais quand il s'agit de trente-trois, il est beaucoup plus difficile de vivre sans outils d'automatisation.

▍ Synchroniser la description et les mots clés avec GitHub

Ce qui est discuté ici n'est pas nécessaire, mais un outil qui automatise la synchronisation des descriptions et des mots clés ne me ferait pas de mal. Cette tâche peut être gérée par les outils de mes outils autogit et autogit-command-github-sync .


Synchroniser les descriptions et les mots clés avec Autogit

Mais autogit-command-github-publish est mon outil pour créer automatiquement de nouveaux référentiels.

▍Rapports

Peu de temps après avoir créé plusieurs extensions, je me suis intéressé à savoir à quel point elles sont populaires, comment, au fil du temps, le nombre de leurs téléchargements change. Vous pouvez trouver des informations sur toutes les extensions d'un certain développeur sur une page spéciale. Par exemple, voici ma page. Cependant, cette page ne fournit pas d'informations, par exemple, sur le nombre de téléchargements d'extensions effectués depuis la dernière vérification. C'est pourquoi j'ai créé rssa . Il s'agit d'un outil qui vous permet de suivre les modifications apportées à tout ce qui est accessible par URL.


Données reçues par rssa

Le texte est bon, mais il serait préférable de présenter les données sous forme de graphique. Maintenant, je développe un outil pour résoudre ce problème, je ne l'ai pas encore publié. Ici, par exemple, ressemble au calendrier de téléchargement de l'extension Todo + , construit sur la base des données obtenues à l'aide de rssa .


Todo + Télécharger le calendrier

Ici, à certains endroits, vous pouvez voir une forte augmentation du nombre de téléchargements. Cela se produit lorsque des mises à jour sont publiées, car l'installation des mises à jour d'extension est considérée par le système comme un téléchargement. Cela conduit au fait que n'importe qui peut être l'auteur de l'extension avec un million de téléchargements, l'écrire et publier de nombreuses mises à jour. C'est d'ailleurs l'un des problèmes du catalogue d'extensions pour VS Code.

Résumé

À un moment donné, je pensais qu'en termes de nombre d'extensions publiées pour VS Code, j'étais en deuxième position après Microsoft. Cependant, il s'est avéré que certains d' entre eux en avaient 2 de plus que le mien. Par conséquent, je continue d'écrire des extensions.

Chers lecteurs! Écrivez-vous des extensions pour VS Code?