Wie ich eine Erweiterung für Atom- und VS-Code erstellt habe: Persönliche Erfahrungen und Quellcodes

Published on February 07, 2019

Wie ich eine Erweiterung für Atom- und VS-Code erstellt habe: Persönliche Erfahrungen und Quellcodes

    Bild

    Wir haben für Sie einen Artikel von Philip Korey über die Entwicklung von Erweiterungen für Atom- und VS-Code-Editoren übersetzt. Projekte können nicht als komplex bezeichnet werden, aber das ist ihr Vorteil: Sie können sofort verstehen, was zu tun ist, um Ihre eigene Erweiterung zu erstellen.

    Als der Atom-Editor zum ersten Mal vorgestellt wurde, war ich wie viele Webentwickler begeistert. "Oh, cooler, erweiterbarer Editor, der auf einem Stapel aufgebaut ist, den ich kenne", dachte ich dann. Und sofort begann, die Fähigkeiten des Editors sowie Tausender anderer Entwickler zu erweitern.

    Ich arbeite übrigens aus zwei Gründen mit Atom. Das erste ist, dass jede Woche großartige Erweiterungen erscheinen. Das zweite ist, dass ich den Stack kenne und problemlos damit arbeiten kann, indem ich meine eigenen Versionen der Erweiterungen erstelle.

    Wir erinnern: für alle Leser von "Habr" - einen Rabatt von 10.000 Rubel beim Schreiben in einen beliebigen Skillbox-Kurs auf den Aktionscode "Habr".

    Skillbox empfiehlt: Online-Kurs "Profession Frontend Developer" .

    Big Cursor Extension


    Als Atom herauskam, programmierte ich in Slim, Sass und CoffeeScript. Zu diesem Zeitpunkt kannte ich keine andere als die übliche Möglichkeit, Einzüge zu bearbeiten - nämlich jeden Einzug einzeln zu ändern. Manchmal war es schwierig, die Vervollständigung des Blocks zu bestimmen, daher habe ich beschlossen, das Erscheinungsbild des Cursors zu ändern. Ich wollte daraus so etwas wie ein Lineal machen, mit dem Sie alles genau messen können. Hier ein Beispiel:



    Um zu verstehen, wie das geht, habe ich die Atom-Entwicklerwerkzeuge untersucht, das Cursorelement ausgewählt und es dann mit CSS geändert. So habe ich so etwas wie einen Proof of Concept bekommen - ich habe erkannt, dass meine Idee umsetzbar ist.

    Als Nächstes untersuchte ich die Dokumentation (erneut), um zu lernen, wie ein Befehl registriert und Änderungen an der Cursorklasse vorgenommen werden. Die erste Iteration war sehr einfach.

    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%;
    } 

    Dies ist eine einfache und funktionierende Erweiterung.

    Was ist mit ihm passiert?

    Nichts Besonderes. Ich habe es geschrieben, als es noch nicht einmal Atom 1.0 gab. Die API wurde später geändert, aber ich brauchte die Erweiterung nicht mehr und habe aufgehört, sie zu unterstützen.

    VS Code


    Nach ein paar Jahren entschied ich mich, zu VS Code zu wechseln. Der Einfachheit halber habe ich eine Erweiterung verwendet, mit der Sie die erforderlichen Parameter, z. B. Variablennamen, schnell ändern können. Aber ich musste ständig einen Befehl eingeben, um diese Änderungen vorzunehmen. Ich wollte sie nicht mit Tastaturtasten verknüpfen, also begann ich über Optionen für die Arbeit mit Aliasen in der ZSH-Shell nachzudenken.

    Es gibt viele Plugins in ZSH und Sie können kurze Versionen von Befehlen verwenden, um sie auszuführen. Ein Beispiel ist das Ausführen des Plugins git checkout mit gco und des Rails-Server-Plugins mit dem Befehl rs.

    Tatsächlich könnte ich für ein Team wie Change Case Snake Case einfach die Anfangsbuchstaben aller Wörter eingeben, das heißt, all dies mit der Abkürzung ccsc ausführen.

    Eine Erweiterung für VS Code schreiben

    Also fing ich an, die Möglichkeiten zum Erstellen von Erweiterungen zu untersuchen. Ich war mit einigen Punkten bereits ein wenig vertraut, da ich meine Ergänzungen für Scry (Sprachserver für Crystal) vorgenommen habe, und deshalb die Crystal-Erweiterung für VS-Code studiert habe.

    Es wurde also mit dem Yeoman-Generator erstellt. Es sah so aus:



    Die Basis der Typescript-Erweiterung ist recht praktisch. Sie können alles mit tsconfig konfigurieren (was jedoch bedeutet, dass Typescript-Dateien häufig einen Fehler erzeugen und nicht kompilieren), aber Sie können die zweite Option auswählen - tslint.

    Nachdem der Generator konfiguriert wurde, haben Sie die Hello World-Erweiterung, die den Hello World-Protokollierungsbefehl hinzufügt. Das Projekt verwendet VS Code-Debugging-Aufgaben, um den Start einer VS Code-Instanz mit aktivierter Erweiterung zu ermöglichen. All dies kann bei Bedarf einfach durch Hinzufügen von Haltepunkten konfiguriert werden. Dadurch können Sie die API problemlos studieren.

    Um die Erweiterung zu erstellen, die ich brauche, muss ich ein paar Dinge wissen:

    • So erstellen Sie ein Palettenfeld, in dem der Benutzer arbeiten kann.
    • So filtern Sie das Palettenfeld, um Befehle entsprechend der vom Benutzer eingegebenen Kurzversionen anzuzeigen.
    • Wie man alle verfügbaren Befehle bekommt, war genau das, wonach man im Fenster suchen sollte.
    • So führen Sie einen Befehl aus.

    Ich musste in die Dokumentation gehen, um alle Daten zu erhalten. Die API ist sehr begrenzt, dies ist ein Problem. Aber ich habe getan, was ich geplant habe.

    1. Palettenfeld

    Dazu müssen Sie nicht auf DOM oder Ansichten zugreifen. Es gibt eine Reihe von Ansichten, die Sie verwenden können (eine davon ist ein HTML-Bedienfeld). Es gab auch eine Präsentation für den Palettenkasten, damit ich verstehen konnte, wie alles funktioniert.

    2. Filtern des Palettenkästchens

    Ich musste es hier versuchen, da die QuickPick-API diese Funktion nicht bietet. Andererseits gibt es ein Ereignis, das abgefangen werden kann, wenn der Benutzer etwas eingibt. Ich ändere nur die Liste der Optionen. Diese Option funktioniert überraschend gut.

     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. Liste der verfügbaren Befehle

    abrufen Auch hier gibt es Schwierigkeiten, Sie können eine Liste der anderen installierten Erweiterungen abrufen. Für jeden müssen Sie auf sein eigenes package.json zugreifen.

    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. Ausführung des Befehls.

    Aber alles ist hier einfach, wir wenden uns an die API, um den erforderlichen Befehl aufzurufen.

    vscode.commands.executeCommand (list.activeItems [0] .command.command)



    Als Ausgabe


    Eigentlich das und alles, was ich für die Redakteure getan habe. Mein Ziel war es zu zeigen, wie Sie Ihre eigenen Erweiterungen entwickeln können. Hier ist eine Liste von dem, was ich in meiner Arbeit verwendet habe, sowie die Quelle der Projekte:


    Skillbox empfiehlt: