Sie haben für Sie
einen Artikel von Philip Korea über die Entwicklung von Erweiterungen für Atom- und VS-Code-Editoren übersetzt. Projekte können nicht als komplex bezeichnet werden, aber dies ist ihr Vorteil: Sie können sofort verstehen, was getan werden muss, um Ihre eigene Erweiterung zu erstellen.
Als der Atom-Editor zum ersten Mal vorgestellt wurde, war ich, wie viele Webentwickler, begeistert. "Oh cool, ein erweiterbarer Editor, der auf dem Stapel aufgebaut ist, den ich kenne", dachte ich damals. Und begann sofort, die Fähigkeiten des Editors sowie Tausender anderer Entwickler zu erweitern.
Ich arbeite übrigens aus zwei Gründen mit Atom. Erstens gibt es jede Woche tolle Erweiterungen. Das zweite - ich kenne den Stack und kann problemlos damit arbeiten und meine eigenen Versionen von Erweiterungen erstellen.
Wir erinnern Sie daran: Für alle Leser von „Habr“ - ein Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Promo-Code „Habr“.
Skillbox empfiehlt: Der Online-Kurs Frontend Developer Profession .
Große Cursorerweiterung
Als Atom herauskam, programmierte ich Slim, Sass und CoffeeScript. Dann kannte ich keine anderen Möglichkeiten, um die Einrückung zu bearbeiten, außer der üblichsten - jede Einrückung einzeln zu ändern. Es war manchmal schwierig, die Fertigstellung eines Blocks zu bestimmen, deshalb habe ich beschlossen, das Aussehen des Cursors zu ändern. Ich wollte daraus ein Lineal machen, mit dem Sie alles genau messen können. Hier ist ein Beispiel:
Um dies zu verstehen, habe ich die Atom-Entwicklertools studiert, ein Cursorelement ausgewählt und es dann mithilfe von CSS geändert. So gelang es mir, so etwas wie einen Proof of Concept zu bekommen - ich erkannte, dass meine Idee realisierbar war.
Als nächstes habe ich die Dokumentation (erneut) studiert, um herauszufinden, wie Sie einen Befehl registrieren und die Änderungen auf die Cursorklasse anwenden können. 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 noch Atom Version 1.0 nicht da war, also hat sich die API 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 die Erweiterung verwendet, mit der Sie die erforderlichen Parameter, z. B. Variablennamen, schnell ändern können. Aber ich musste ständig in ein Team eintreten, um diese Änderungen vorzunehmen. Und ich wollte sie nicht an irgendwelche Tasten auf der Tastatur binden, also begann ich Optionen für die Arbeit mit Aliasen in der ZSH-Shell in Betracht zu ziehen.
ZSH hat viele Plugins und Sie können kurze Versionen von Befehlen verwenden, um sie auszuführen. Beispiel - Das Ausführen des git checkout-Plugins kann mit gco und das Rails-Server-Plugin mit dem Befehl rs erfolgen.
Tatsächlich könnte ich für ein Team wie Change Case Snake Case einfach die ersten Buchstaben aller Wörter eingeben, dh all dies mit der Abkürzung ccsc ausführen.
Schreiben einer Erweiterung für VS CodeAlso begann ich die Möglichkeiten zum Erstellen von Erweiterungen zu erkunden. Mit einigen Punkten war ich bereits ein wenig vertraut, da ich Scry (den Sprachserver für Crystal) ergänzt und die Crystal-Erweiterung für VS-Code studiert habe.
Also wurde es mit dem Yeoman-Generator erstellt. Es sah so aus:
Die Basis der Typescript-Erweiterung ist sehr praktisch. Sie können alles mit tsconfig konfigurieren (was jedoch bedeutet, dass Typescript-Dateien häufig einen Fehler verursachen und nicht kompilieren), aber Sie können die zweite Option auswählen - tslint.
Nachdem der Generator konfiguriert wurde, haben Sie die Erweiterung "Hallo Welt", die den Protokollierungsbefehl "Hallo Welt" hinzufügt. Das Projekt verwendet VS Code-Debugging-Aufgaben, damit Sie eine Instanz von VS Code mit aktivierter Erweiterung ausführen können. All dies kann bei Bedarf einfach durch Hinzufügen von Haltepunkten konfiguriert werden. Dadurch können Sie die API problemlos erlernen.
Um die Erweiterung zu erstellen, die ich benötige, muss ich einige Dinge wissen:
- So erstellen Sie ein Palettenfeld, in dem der Benutzer arbeiten kann.
- So filtern Sie das Palettenfeld, um Befehle nach ihren vom Benutzer eingegebenen Kurzversionen anzuzeigen.
- So erhalten Sie alle verfügbaren Befehle, damit direkt im Fenster nach etwas gesucht werden kann.
- So führen Sie einen Befehl aus.
Ich musste mich in die Dokumentation vertiefen, um alle Daten zu erhalten. Die API ist sehr begrenzt, dies ist ein Problem. Aber ich habe getan, was ich geplant hatte.
1. PalettenfeldSie müssen hierfür nicht auf das DOM oder die Ansichten zugreifen. Hier gibt es eine Reihe von Ansichten, die Sie verwenden können (eine davon ist ein HTML-Bereich). Es gab eine Präsentation für die Palettenbox, so dass ich verstehen konnte, wie das alles funktioniert.
2. Filtern des PalettenfeldsIch musste es hier versuchen, da die QuickPick-API keine solche Möglichkeit bietet. Aber er hat ein Ereignis, das jedes Mal abgefangen werden kann, wenn ein Benutzer etwas eingibt. Ich ändere einfach 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. Holen Sie sich eine Liste der verfügbaren BefehleAuch hier gibt es Schwierigkeiten, Sie können eine Liste anderer installierter Erweiterungen erhalten. Für alle müssen Sie auf die eigene 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. BefehlsausführungNun, hier ist alles einfach. Wir wenden uns an die API, um den gewünschten Befehl aufzurufen.
vscode.commands.executeCommand (list.activeItems [0] .command.command)
Als Fazit
Das ist alles, was ich für die Redakteure getan habe. Mein Ziel war es zu zeigen, wie Sie mit der Entwicklung Ihrer eigenen Erweiterungen beginnen können. Hier ist eine Liste von dem, was ich in meiner Arbeit verwendet habe, sowie die Quelle der Projekte:
Skillbox empfiehlt: