Die Geschichte der 33 Erweiterungen für VS Code, über deren Entwicklung und Verwaltung

Published on November 12, 2018

Die Geschichte der 33 Erweiterungen für VS Code, über deren Entwicklung und Verwaltung

Ursprünglicher Autor: Fabio Spampinato
  • Übersetzung
Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, hat 33 Erweiterungen für VS Code erstellt. Er beschloss, denjenigen, die diesen Editor mögen, die Methode zur Entwicklung und Unterstützung von Erweiterungen mitzuteilen. Außerdem sprach er kurz über ihre Projekte. Vielleicht finden Sie unter ihnen etwas, das Ihnen nützlich ist.



Wie man Erweiterungen schreibt


Ich strebe nach produktiver Arbeit und liebe Automatisierung, daher habe ich einen gut organisierten Entwicklungsprozess für VS-Code-Erweiterungen entwickelt. Ich werde über die Hauptkomponenten dieses Prozesses erzählen.

▍Werkzeuge


Ich habe ein sehr einfaches Tool geschrieben , mit dem Sie mithilfe einer Vorlage schnell mit der Arbeit an neuen Projekten beginnen können. Das entsprechende Dienstprogramm funktioniert folgendermaßen:

  • Am Eingang befindet sich ein Ordner (dies wird als "Vorlage" bezeichnet).
  • Es verarbeitet alle Dateien mithilfe des Handlebars- Pakets und stellt während der Verarbeitung Fragen dazu, was für jeden gefundenen Platzhalter (wie {{name}}) ersetzt werden soll.
  • Infolgedessen bildet sie einen neuen Ordner, dessen Dateien enthalten, was als Antwort auf ihre Fragen eingegeben wurde.

Ich habe darüber nachgedacht, das Dienstprogramm yeoman für die Arbeit mit Vorlagen zu verwenden , aber für meine Anforderungen scheint es unnötig komplex zu sein. Ich habe das khaos- Tool verwendet , es wird jedoch nicht unterstützt und aktualisiert Vorlagen nicht automatisch. Es ist nicht besonders praktisch, sie manuell zu aktualisieren, wenn ich sie verwenden muss.

▍Vorlage


Auf diese Weise beginne ich mit der Vorlage template-vscode-extension , eine neue Erweiterung für VS Code zu entwickeln.


Erstellen eines neuen Projekts

Nachdem die Antworten auf die Fragen des Programms eingegeben wurden, habe ich eine funktionierende Erweiterung zur Verfügung, etwa „Hallo Welt!“ Für VS Code. Die Vorlage enthält viele Unterstützungsfunktionen, die ich, wie sich herausstellte, häufig bei der Entwicklung von Erweiterungen verwende. Insbesondere unterstützt die Vorlage das Herunterladen einer Benutzerkonfigurationsdatei aus einem Ordner.vscode, die automatische Registrierung von Befehlen, das Auffinden des aktuellen Stammverzeichnisses anhand der aktiven Datei und das Lösen anderer ähnlicher Aufgaben.

Wenn ich die Uhr zurückdrehen könnte, würde ich wahrscheinlich alle diese Support-Funktionen in einem eigenständigen Paket unterbringen, in so etwas wievscode-utilsAnstatt Kopien dieser Funktionen in jedem Erweiterungsentwicklungsprojekt zu erstellen. Aber dann wusste ich leider nicht, dass ich Dutzende von Erweiterungen erstellen würde. Jetzt muss ich einige Zeit damit verbringen, den entsprechenden Code in allen Projekten meiner Erweiterungen zu aktualisieren.

Wenn Sie vorhaben, VS-Code-Erweiterungen zu entwickeln, empfehle ich Ihnen, eine eigene Vorlage zu erstellen, die möglicherweise meiner zugrunde liegt.

▍Nützliche Dokumentation


Während des Entwicklungsprozesses habe ich immer die Dokumentation zur VS Code API zur Hand . Das Arbeiten mit diesem Dokument, das eine riesige Seite ist, ist zunächst nicht besonders praktisch. Wenn Sie sich jedoch etwas Zeit nehmen, um einen kurzen Blick darauf zu werfen, und wenn Sie wissen, welche APIs für Sie verfügbar sind, können Sie sie problemlos verwenden. Im Allgemeinen kann ich sagen, dass ich mit den verfügbaren APIs sehr zufrieden bin.

Übrigens, wenn Sie Erweiterungen für VS Code entwickeln möchten, ist es äußerst nützlich, diesen Abschnitt der Dokumentation zu lesen .

▍Über die von mir entwickelten Erweiterungen


Ich entwickle Erweiterungen, um verschiedene Probleme zu lösen. Wir werden weiter unten darauf eingehen. Darüber hinaus helfen mir einige dieser Erweiterungen, andere Erweiterungen zu entwickeln.

Meine Erweiterungen


Wie gesagt, ich strebe nach Produktivität, daher zielen viele meiner Erweiterungen auf die Steigerung der Produktivität ab. Ich versuche, mich nicht auf die ständige Erfindung des Fahrrads einzulassen und versuche, die Funktionen der verschiedenen Erweiterungen klar voneinander zu trennen, damit ihre gemeinsame Nutzung keine Probleme verursacht.

Ich weiß nicht, ob das gut oder schlecht ist, aber ich erstelle gerne Erweiterungen für VS Code. Darüber hinaus trocknet der Ablauf von Aufgaben, die automatisiert werden können, nicht aus. Deshalb habe ich, nachdem ich die erste Erweiterung geschrieben hatte, die zweite und dann die dritte gemacht, was dazu geführt hat, dass ich die dreiunddreißig erreicht habe.

Jetzt werde ich kurz über meine Erweiterungen sprechen. Details dazu finden Sie auf ihren Seiten.

Erweiterungen, um Erweiterungen zu erstellen


№1. Debug-Manager


Mit der Erweiterung Debug Manager können Sie das Debuggen auch von einem Terminal aus starten, ohne Aufgaben oder Konfigurationsdateien erstellen zu müssen. Ich habe diese Erweiterung erstellt, weil ich die Repositorys nicht mit unnötigen Dateien überladen wollte (und wer verwendet zum Beispiel Aufgaben?). Ich glaube, das Starten eines Debuggers von einem Terminal aus ist eine Gelegenheit, die so nützlich ist, dass es sich lohnt, sie in den VS-Code selbst aufzunehmen.


Starten Sie den Debugger vom Terminal aus

№2. StatusBar Debugger


Die Erweiterung StatusBar Debugger fügt der Programmstatusleiste Steuerelemente zum Debuggen hinzu. Dies ist viel praktischer als das Standard- Debug- Panel . Wenn VS Code mehr Debugging-Daten liefern würde, wäre meine Erweiterung sogar noch besser.

№3. Installieren Sie .VSIX


Mit der Erweiterung Install .VSIX können Sie .vsixDateien direkt über das Bedienfeld Проводник(Explorer) installieren . Der Grund für das Erscheinen dieser Erweiterung war die Tatsache, dass die Standardprozedur zum Installieren solcher Dateien unpraktisch ist .

№4. Stoß


Mit der Erweiterung " Bump" können Sie die Versionsnummer des Projekts erhöhen und dem Änderungsprotokoll neue Daten hinzufügen. Dieses Tool arbeitet nach seiner eigenen internen Logik, ist jedoch konfigurierbar. Ich habe es erstellt, weil jede anständige Erweiterung ein Änderungsprotokoll benötigt. Dies bedeutet jedoch nicht, dass der Entwickler einer solchen Erweiterung manuell Einträge im Protokoll vornehmen muss. Dies ist eine meiner Lieblingserweiterungen. Vielleicht werde ich darauf basierend ein Kommandozeilen-Tool erstellen, damit ich eines Tages auch GitHub-Releases automatisieren kann.


Verwendung der Bump Extension

№5. Bilder optimieren


Expansion Optimieren von Bildern optimiert Bilder im Entwurf zur Verfügung, eine externe Benutzer ausgewählte Anwendung. Ein Team - und fertig.

Проект Projektmanagement


№6. Projekte +


Projekte + Erweiterung wird für das Projektmanagement verwendet. Es verfügt über umfangreiche Funktionen, ist anpassbar und findet automatisch Projekte. Eine der am häufigsten verwendeten Erweiterungen dieser Art ist der Projektmanager , aber ich habe ungefähr hundert Repositorys und benötige die richtigen Tools, um sie zu verwalten. Eine davon ist die Unterstützung von Gruppen mit unbegrenzten Verschachtelungsebenen.


Arbeite mit Project + Erweiterung

▍Do-Listen verwalten


№7. Todo +


Die Erweiterung Todo + erleichtert das Arbeiten mit Aufgabenlisten. Es ist ein leistungsstarkes Tool, einfach zu bedienen und anpassbar. Wenn Sie keine Syntaxhervorhebung für TODODateien benötigen oder die standardmäßig integrierte Hervorhebung bevorzugen, können Sie eine gute Todo Tree- Erweiterung ausprobieren .


Syntaxhervorhebung mit Informationen zu Todo + und Projektebene

№8. Hervorheben


Die Highlight- Erweiterung ist ein erweiterter Syntax-Textmarker, der auf regulären Ausdrücken basiert. Es ist nützlich, mit Aufgabenlisten, Anmerkungen und Ähnlichem zu arbeiten. Die TODO Highlight- Erweiterung ist in diesem Bereich sehr beliebt , aber meine Erweiterung ist vielseitiger und viel leistungsfähiger. Außerdem funktioniert es wahrscheinlich schneller.

№9. Markdown Todo


Die Erweiterung Markdown Todo erleichtert das Arbeiten mit Aufgabenlisten in Markdown-Dateien. Es gibt nichts Besonderes, aber es ermöglicht Ihnen, die Funktionen von Todo + in Markdown-Dateien zu verwenden.

№10. Projekte + Todo +


Mit der Erweiterung Projects + Todo + können Sie Projekte sozusagen aus der Vogelperspektive analysieren, um das Ergebnis der Zusammenfassung aller Aufgaben in einer Datei zu sehen. Wenn Sie die Erweiterung Projects + für die Projektverwaltung und Todo + für die Arbeit mit Aufgabenlisten verwenden, können Sie dank dieser Erweiterung Aufgabenlisten von allen (oder einigen) Projekten an einem Ort sammeln.

▍ Erweiterungen zum Öffnen von Dateien


Ich bin an der Möglichkeit interessiert, schnell zwischen verschiedenen Anwendungen oder Webseiten zu wechseln. Aus diesem Grund habe ich eine Reihe von Erweiterungen für VS Code erstellt, um die Lösung solcher Probleme zu vereinfachen.

№11. In Anwendung öffnen


Mit der Erweiterung In Anwendung öffnen können Sie beliebige Dateien in einer Standardanwendung oder in einer Anwendung öffnen, die der Entwickler verwendet. Dies ist eine universelle Erweiterung.

№12. In Browsern öffnen


Die Erweiterung In Browsern öffnen fügt dem Editor Befehle hinzu, mit denen Sie die aktuelle Datei oder das aktuelle Projekt in einem beliebigen Browser oder sogar sofort in allen verfügbaren Browsern öffnen können.

№13. Im Code öffnen


Die Open-in-Code- Erweiterung erleichtert den Wechsel zwischen VS-Code und VS-Code-Insidern.

№14. Im Finder öffnen


Die Erweiterung In Finder öffnen dient zum Öffnen der aktuellen Datei oder des aktuellen Projekts im Finder-Dateimanager.

№15. In Github öffnen


Mit der Erweiterung In GitHub öffnen können Sie das aktuelle Projekt oder die aktuelle Datei auf github.com öffnen. Es gibt viele Erweiterungen, um dieses Problem zu lösen, aber als ich sie ausprobierte, stellte sich heraus, dass sie zu viele Funktionen hatten, die ich nicht brauchte.

№16. In GitTower öffnen


Die Erweiterung In GitTower öffnen fügt dem Editor einen Befehl zum Öffnen des aktuellen Projekts in GitTower hinzu .

№17. In Marketplace öffnen


Der Ausbau Open in Markt rüstet Editor Befehl das aktuelle Projekt zu öffnen Verzeichnis von Erweiterungen für VS - Code.

№18. In node_modules öffnen


Mit der Erweiterung Öffnen in node_modules können Sie nach node_modulesModulen im Ordner suchen , die dem ausgewählten Text oder einer beliebigen Zeichenfolge entsprechen, und deren Ordner öffnen. Dies ist hilfreich, wenn der Entwickler die von ihm verwendeten Module besser verstehen möchte.

Nr. 19 In NPM öffnen


Mit der Erweiterung Open in NPM können Sie Modulseiten im Verzeichnis npm öffnen. Es ist praktisch, Referenzinformationsmodule anzuzeigen.

№20. Im Schiff öffnen


Die Erweiterung Open in Ship fügt dem Editor einen Befehl zum Öffnen des aktuellen Projekts in Ship hinzu. Entschuldigung, das Schiff hat aufgehört zu arbeiten. Um die eingehenden Informationen zu Problemen in meinen Projekten nicht zu vergessen, muss ich jetzt ein spezielles Erinnerungsblatt in Noty verwenden .

№21. Im Terminal öffnen


Die Erweiterung Open in Terminal vereinfacht das Öffnen des aktuellen Projekts im Terminal.

№22. Während des Transports öffnen


Mit der Erweiterung Open in Transmit können Sie die aktuelle Datei oder das aktuelle Projekt in Transmit öffnen .

▍ Verschiedenes


Nr. 23 Browser aktualisieren


Mit der Erweiterung Browser- Aktualisierung können Sie die Seite im Browser aktualisieren, indem Sie directlyR direkt in VS Code drücken, ohne zum Browser wechseln zu müssen. Diese Erweiterung ist nützlich, wenn die Online-Reload-Funktion nicht verwendet werden kann und Sie die Seite nicht browser-syncaktualisieren müssen, ohne dass dies erforderlich ist .

№24. Befehle


Expanding - Befehle können Sie beliebige Befehle von der Statusleiste aufzurufen. Die Übergabe von Argumenten wird unterstützt.


Benutzerbefehle, die von Befehlen erstellt wurden

№25. Diff


Mit der Diff- Erweiterung können Sie geöffnete Dateien vergleichen. Ich habe diese Erweiterung erstellt, weil das Design code-diff path1 path2zu langsam ist.

№26. Git-Dateiversionen


Die Erweiterung Git File History vereinfacht die Analyse der Unterschiede in der aktuellen Datei gegenüber der Vorgängerversion. Es gibt viele Erweiterungen, um dieses Problem zu lösen, aber als ich sie ausprobierte, stellte sich heraus, dass sie entweder mit unnötigen oder nicht funktionierenden Gelegenheiten gefüllt waren.

№27. Github-Benachrichtigungen


Eine sichere und konfigurierbare GitHub Notifications- Erweiterung dient dazu, Benachrichtigungsinformationen zu GitHub in der Statusleiste anzuzeigen.

№28. Monokai Nachtthema


Monokai Night Theme ist ein minimalistisches dunkles Thema, das auf dem Monokai-Thema basiert. Ich habe es aufgrund der Tatsache erstellt, dass ich aus den vorhandenen Themen nicht das aufgreifen konnte, was zu mir passt.


Monokai Nachtthema

№29. Nein [Nicht unterstützt]


Die Erweiterung No [Unsupported] soll die Zeichenfolge "[Unsupported]" aus dem Editor-Header entfernen. Diese Erweiterung ist veraltet, daher empfehle ich stattdessen, VSCode-Prüfsummen zu korrigieren . Leider ist auch nach diesem und jenem Gespräch die lästige Inschrift „[Unsupported]“ nie verschwunden.

№30. Öffnen Sie mehrere Dateien


Mit der Erweiterung Mehrere Dateien öffnen können Sie alle Dateien in einem Ordner gleichzeitig öffnen. Bei Bedarf können Dateien nach Vorlage gefiltert werden.

№31. Suche - Alle Ergebnisse öffnen


Mit der Erweiterung Suchen - Alle Ergebnisse öffnen können Sie alle Suchergebnisse gleichzeitig mit einem einzigen Befehl anzeigen.

№32. Terminal-Manager


Die Erweiterung Terminals Manager automatisiert die Arbeit mehrerer Terminals gleichzeitig, z. B. die Ausführung einiger darin enthaltener Befehle. Ich muss sagen, dass Terminals Manager meine erste Erweiterung war. Wenn Sie Terminals verwenden, empfehle ich, es zu versuchen.

Nr. 33 Übertragen


Die Transmit- Erweiterung stattet den Editor mit mehreren Befehlen zum Organisieren der Interaktion mit Transmit aus.

Extension Management


Das Verwalten mehrerer Repositorys kann eine schwierige Aufgabe sein. Ich sage dir, wie ich es mache.

▍Wiederholen von Commits


Früher oder später kommt eine Zeit, in der Sie eine bestimmte Änderung an allen unterstützten Repositorys vornehmen müssen. Dies ist darauf zurückzuführen, dass Sie in vielen Repositories dieselben Commits ausführen müssen. Sehr bald wird es zum langweiligsten Beruf.

Um die Lösung dieses Problems zu automatisieren, habe ich Autogit erstellt , ein Tool, mit dem Sie Befehle ausführen können, die auf mehrere Repositorys angewendet werden.


Beim Ausführen eines Befehls mit Autogit finde

ich ständig neue Verwendungsmöglichkeitenautogit. Beispielsweise habe ich kürzlich mit Hilfe dieses Tools die folgenden Änderungen in allen Repositorys vorgenommen, in denen der Code meiner Erweiterungen für VS Code gespeichert ist:

  • Bauen mit webpack. Dies ergab eine Verbesserung der Startgeschwindigkeit von etwa 80%.
  • Datei ignorieren package-lock.json. Diese Datei enthält nur meinen Commit-Verlauf. Hier ist ein gutes Material zu diesem Thema.
  • Update tsconfig.json. Ich benutze intensiv neue Features der Sprache, insbesondere asynchrone Funktionen. Sie werden transpiliert, wenn der Zweck der Transpilation <= es5für sehr langsame Konstruktionen angegeben wird. Da VS Code modernen Code versteht, besteht keine Notwendigkeit mehr dafür.
  • TSLint entfernen . Ich habe festgestellt, dass ich im Grunde nicht auf die Tipps der Linter achte, also habe ich diese Gelegenheit verpasst.
  • Verwenden Sie ein hochauflösendes Logo in Referenzmaterialien. Früher habe ich ein 128x128-Logo verwendet, jetzt habe ich ein besseres Bild verwendet, um das Aussehen von Referenzmaterialien zu verbessern. Ich kann nicht sagen, dass das Bild selbst ein Wunder ist, aber das ist eine andere Geschichte.

Es dauert nicht lange, solche Änderungen in einem Repository vorzunehmen, aber wenn es um dreiunddreißig geht, ist es viel schwieriger, ohne Automatisierungstools zu leben.

▍ Synchronisieren Sie Beschreibungen und Stichwörter mit GitHub


Was hier besprochen wird, ist nicht notwendig, aber ein Tool, das die Synchronisation von Beschreibungen und Stichwörtern automatisiert, würde mir nicht schaden. Diese Aufgabe kann mit den Tools meiner Tools autogit und autogit-command-github-sync erledigt werden .


Synchronisation von Beschreibungen und Schlüsselwörtern mittels Autogit

Und hier ist Autogit-Command-Github-Publish mein Werkzeug zur automatisierten Erstellung neuer Repositories.

▍Berichte


Kurz nachdem ich mehrere Erweiterungen erstellt hatte, war ich daran interessiert herauszufinden, wie beliebt sie sind und wie sich die Anzahl ihrer Downloads im Laufe der Zeit ändert. Auf einer speziellen Seite finden Sie Informationen zu allen Erweiterungen eines bestimmten Entwicklers. Zum Beispiel ist hier meine Seite. Diese Seite enthält jedoch keine Informationen, beispielsweise darüber, wie viele Erweiterungen seit der letzten Überprüfung heruntergeladen wurden. Deshalb habe ich rssa erstellt . Dies ist ein Tool, mit dem Sie Änderungen an Elementen verfolgen können, die per URL verfügbar sind.


Die mit rssa empfangenen Daten

Der Text ist gut, aber wo wäre es besser, die Daten in Form einer Grafik darzustellen . Jetzt entwickle ich ein Tool zur Lösung dieses Problems, das ich noch nicht veröffentlicht habe. Hier sieht beispielsweise der Download-Zeitplan für die Todo + -Erweiterung aus, der auf den mit erhaltenen Daten basiertrssa.


Zeitplan für Todo + -Downloads

Hier ist an einigen Stellen ein starker Anstieg der Anzahl der Downloads zu beobachten. Dies geschieht beim Veröffentlichen von Updates, da die Installation von Updates für eine Erweiterung vom System als Download berücksichtigt wird. Dies führt dazu, dass jeder der Autor der Erweiterung mit einer Million Downloads sein kann, sie schreibt und viele Updates veröffentlicht. Dies ist übrigens eines der Probleme mit dem VS Code-Erweiterungsverzeichnis.

Ergebnisse


Einmal dachte ich, dass ich nach der Anzahl der veröffentlichten Erweiterungen für VS Code an zweiter Stelle nach Microsoft stehe. Es stellte sich jedoch heraus, dass einige von ihnen 2 mehr sind als ich. Daher schreibe ich weiterhin Erweiterungen.

Sehr geehrte Leser! Schreiben Sie Erweiterungen für VS Code?