Ils ont traduit pour vous
un article de Philip Korea sur la façon dont il a développé des extensions pour les éditeurs Atom et VS Code. Les projets ne peuvent pas être qualifiés de complexes, mais c'est leur avantage: vous pouvez immédiatement comprendre ce qui doit être fait pour créer votre propre extension.
Lorsque l'éditeur Atom a été introduit pour la première fois, comme beaucoup de développeurs Web, j'étais ravi. «Oh cool, un éditeur extensible construit sur la pile que je connais», ai-je alors pensé. Et a immédiatement commencé à étendre les capacités de l'éditeur, ainsi que des milliers d'autres développeurs.
Soit dit en passant, je travaille avec Atom pour deux raisons. Tout d'abord, il y a de grandes extensions chaque semaine. La seconde - je connais la pile et je peux travailler avec elle sans problème, en créant mes propres versions d'extensions.
Nous vous rappelons: pour tous les lecteurs de «Habr» - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promo «Habr».
Skillbox recommande: Le cours en ligne Frontend Developer Profession .
Extension du gros curseur
Quand Atom est sorti, j'ai programmé Slim, Sass et CoffeeScript. Ensuite, je ne connaissais pas d'autres façons de modifier l'indentation, à l'exception de la plus habituelle - pour modifier chaque indentation individuellement. Il était parfois difficile de déterminer la fin d'un bloc, j'ai donc décidé de changer l'apparence du curseur. Je voulais le transformer en quelque chose comme une règle qui vous permet de tout mesurer avec précision. Voici un exemple:
Pour comprendre comment faire cela, j'ai étudié les outils de développement Atom, sélectionné un élément de curseur, puis changé en utilisant CSS. Ainsi, j'ai réussi à obtenir quelque chose comme une preuve de concept - j'ai réalisé que mon idée était réalisable.
Ensuite, j'ai étudié (à nouveau) la documentation afin de découvrir comment vous pouvez enregistrer une commande et appliquer les modifications à la classe de curseur. La première itération a été très simple.
module.exports = activate: (state) -> atom.workspaceView.command 'big-cursor:toggle', @toggle toggle: ()-> atom.workspaceView.getActiveView() .find(".cursor").toggleClass("big-cursor") .big-cursor { top: 0 !important; height:100%; }
Il s'agit d'une extension simple et fonctionnelle.
Que lui est-il arrivé?
Rien de spécial, je l'ai écrit alors que même la version 1.0 d'Atom n'était pas là, donc l'API a changé plus tard, mais je n'avais plus besoin de l'extension et j'ai arrêté de la supporter.
VS Code
Après quelques années, j'ai décidé de passer au VS Code. Pour plus de commodité, j'ai utilisé l'extension, qui vous a permis de modifier rapidement les paramètres nécessaires, tels que les noms de variables. Mais je devais constamment intégrer une équipe pour faire ces changements. Et je ne voulais pas les lier à des boutons du clavier, j'ai donc commencé à envisager des options pour travailler avec des alias dans le shell ZSH.
ZSH possède de nombreux plugins, et vous pouvez utiliser des versions courtes de commandes pour les exécuter. Exemple - exécuter le plugin git checkout peut être fait avec gco, et le plugin serveur rails avec la commande rs.
En fait, pour une équipe comme Change Case Snake Case, je pouvais simplement saisir les premières lettres de tous les mots, c'est-à-dire exécuter tout cela en utilisant l'abréviation ccsc.
Écrire une extension pour VS CodeJ'ai donc commencé à explorer les possibilités de création d'extensions. J'étais déjà un peu familier avec certains points, car j'ai fait mes ajouts à Scry (le serveur de langue pour Crystal), j'ai donc étudié l'extension Crystal pour VS Code.
Ainsi, il a été créé à l'aide du générateur Yeoman. Cela ressemblait à ceci:
La base de l'extension Typescript est assez pratique. Vous pouvez tout configurer avec tsconfig (ce qui signifie cependant que les fichiers Typescript peuvent souvent générer une erreur et ne pas être compilés), mais vous pouvez choisir la deuxième option - tslint.
Une fois le générateur configuré, vous disposez de l'extension hello world, qui ajoute la commande hello world logging. Le projet utilise des tâches de débogage de VS Code pour vous permettre d'exécuter une instance de VS Code avec l'extension activée. Tout cela peut vraiment être facilement configuré avec l'ajout de points d'arrêt si nécessaire. En conséquence, vous pouvez apprendre l'API sans aucun problème.
Afin de créer l'extension dont j'ai besoin, je dois savoir quelques choses:
- Comment créer une boîte de palette où l'utilisateur peut travailler.
- Comment filtrer la palette pour afficher les commandes en fonction de leurs versions courtes saisies par l'utilisateur.
- Comment obtenir toutes les commandes disponibles pour qu'il y ait quelque chose à rechercher directement dans la fenêtre.
- Comment exécuter une commande.
J'ai dû fouiller dans la documentation afin d'obtenir toutes les données. L'API est très limitée, c'est un problème. Mais j'ai fait ce que j'avais prévu.
1. Boîte à paletteVous n'avez pas besoin d'accéder au DOM ou aux vues pour cela. Il existe un ensemble de vues que vous pouvez utiliser (l'un d'eux est un panneau HTML). Il y avait une présentation pour la boîte à palette, donc j'ai pu comprendre comment tout cela fonctionne.
2. Filtrage de la paletteJ'ai dû essayer ici, car l'API QuickPick n'offre pas une telle opportunité. Mais il a un événement qui peut être intercepté chaque fois qu'un utilisateur commence à taper quelque chose, je change juste la liste des options. Cette option fonctionne étonnamment bien.
let disposable = vscode.commands.registerCommand('short-commands.activatePalette', () => { let list = vscode.window.createQuickPick<CommandOption>(); list.placeholder = "Hello type some stuff"; list.onDidChangeValue((ee) => { if (ee.length === 0) { list.items = []; } else { list.items = options.filter((e) => e.short.startsWith(ee)) } }); });
3. Obtenez une liste des commandes disponiblesIci aussi, il y a des difficultés, vous pouvez obtenir une liste des autres extensions installées. Pour tout le monde, vous devez accéder à son propre package.json.
function parseExtensionCommands( extensions: Extension<any>[] ): CommandOption[] { let options: CommandOption[] = []; extensions.forEach(ext => { let { packageJSON: { contributes: { commands } = { commands: [] } } } = ext; if (commands) { commands.forEach((c: Command) => { options.push(new CommandOption(c)); }); } }); return options; }
4. Exécution des commandesEh bien, tout est simple ici, nous nous tournons vers l'API pour appeler la commande souhaitée.
vscode.commands.executeCommand (list.activeItems [0] .command.command)
En conclusion
En fait, c'est tout ce que j'ai fait pour les éditeurs. Mon objectif était de montrer comment vous pouvez commencer à développer vos propres extensions. Voici une liste de ce que j'ai utilisé dans mon travail, ainsi que la source des projets:
Skillbox recommande: