So erstellen Sie Projektvorlagen und Erweiterungen für Visual Studio 2019

Hallo!

Kürzlich habe ich zwei Projektvorlagen für Vue JS + Asp.Net Core erstellt, beide als Visual Studio 2019-Erweiterungen. Sie wurden auf dem Visual Studio-Marktplatz freigegeben, wie Sie unter dem folgenden Link sehen können:

  • Template Vue JS + Asp.Net Core 3.1

Möchten Sie wissen, wie Sie Ihre eigene Erweiterung erstellen und Ihre eigene Vorlage veröffentlichen können? Wenn ja, ist der Rest des Artikels ein schrittweiser Prozess, wie das geht.

Projekterstellung

Als erstes müssen Sie ein Projekt erstellen, das Sie als Vorlage freigeben möchten. In diesem Artikel werde ich Schritt für Schritt anhand des bereits veröffentlichten Vue JS + Asp.Net Core-Projekts demonstrieren.

Projektexport

Sobald das Projekt erstellt wurde, gehen Sie in Visual Studio 2019 zur Menüoption Projekt und wählen Sie die Option „Vorlage exportieren“:

Es gibt zwei Arten von Vorlagen: Projektvorlage und Artikelvorlage. Da wir in unserem Fall eine Projektvorlage erstellen, habe ich die zugrunde liegende Option ausgewählt:

Der nächste Schritt besteht darin, den Namen, die Beschreibung, das Symbol, das den Benutzern angezeigt wird, und die Bildvorschau zu konfigurieren. Es ist wirklich wichtig, diese Informationen so gut wie möglich einzustellen, da sie den Endbenutzern angezeigt werden, die Ihre Vorlage / Erweiterung herunterladen und installieren.

Deaktivieren Sie die Option "In Visual Studio automatisch importieren". Auf diese Weise können Sie die von Ihnen erstellte Erweiterung installieren.

Schließlich generiert der Prozess einen kompakten Ordner, der die Vorlage selbst enthält, aber nicht das Ende der Erstellung ist:

Tags Definition

Wenn wir in Visual Studio 2019 ein neues Projekt erstellen, werden die Vorlagen zusammen mit einigen bestimmten Tags angezeigt, mit denen wir die Vorlagen filtern können:

Seit der neuesten Version von Visual Studio 2019 sind diese Tags für diejenigen obligatorisch, die eine Erweiterung veröffentlichen möchten. Ohne diese wird die Erweiterung installiert, aber die Vorlage wird niemals in der Liste angezeigt, selbst wenn der Benutzer danach sucht.

Öffnen Sie zum Erstellen dieser Tags den kompakten Ordner, der im letzten Schritt mit der Vorlage generiert wurde, und öffnen Sie die .vstemplate-Datei mit einem Texteditor:

Fügen Sie im Abschnitt "Vorlagendaten" nach dem Tag "ProvideDefaultName" den Tag-Listenverweis auf Ihre Vorlage hinzu, z. B. Plattform, Projekttyp, Sprache usw. In meinem Fall habe ich Folgendes angegeben:

Die vollständige Liste der verfügbaren Tags finden Sie unter dem folgenden Link:

Erstellung der Erweiterung

Nachdem die Vorlage bereits erstellt und die Tags festgelegt wurden, ist es jetzt an der Zeit, die Installationsdatei für die Erweiterung zu erstellen.

Erstellen Sie dazu einfach ein Projekt vom Typ VSIX Project:

Dies ist die Grundstruktur des Projekts:

PS: Ich habe den Projektnamen jedoch mit bestimmten Sonderzeichen als „+“ erstellt, nur zu Unterrichtszwecken. Bitte vermeiden Sie dies in realen Szenarien. Es ist besser, ohne Leerzeichen oder Sonderzeichen wie das folgende zu erstellen: TemplateVueJSAspNetCoreArtigoMedium anstelle des von mir angegebenen Namens. Build-Probleme werden verhindert, da der VS automatisch Namespaces und Klassen mit diesem Namen generiert.

Fügen Sie den Stammverweis auf Ihre Vorlage in das Stammverzeichnis ein. Es ist wichtig, dass der kompakte Ordner die Änderungen der .vstemplate-Datei mit den zuvor erwähnten Tags enthält. Vergiss das nicht.

Dieses Projekt verfügt über eine Manifestdatei, die die Informationen zu den Installationsanweisungen für die Erweiterung e enthält.

Wenn Sie in diese Datei doppelklicken, wird sie wie ein Formular geöffnet, das Sie Feld für Feld ausfüllen können.

Ändern Sie sorgfältig alle erforderlichen Informationen mit Qualität, da sie dem Endbenutzer auch in der Installation und auf dem Markt angezeigt werden. Außerdem muss das Feld "Autor" korrekt angegeben werden, da es normalerweise den Namen LAPTOP hat.

Klicken Sie danach auf "Assets":

Entfernen Sie die vorhandenen Assets, falls vorhanden, und klicken Sie auf "Neu":

Wählen Sie die Optionen aus, die ich eingefügt habe, und geben Sie im Pfad den kompakten Ordner an, den Sie dem Projekt hinzugefügt haben.

Generation

Um die Installationsdatei zu erstellen, wird das Projekt lediglich im Release-Modus erstellt. Es wird die EXE-Datei generiert, mit der die Erweiterung auf VS installiert wird.

Getan! Unsere Erweiterung wurde erstellt. Sie können es jetzt testen, bevor Sie es auf dem Visual Studio-Marktplatz veröffentlichen, um festzustellen, ob alles ordnungsgemäß funktioniert.

Visual Studio Market veröffentlichen

Wenn Sie Ihre Erweiterung öffentlich veröffentlichen möchten, können Sie dies auf dem Visual Studio Marketplace tun.

Gehen Sie dazu zu marketc.visualstudio.com und gehen Sie nach der Anmeldung mit Ihrem Microsoft-Konto zu den folgenden Optionen:

Laden Sie die EXE-Datei Ihrer Erweiterung hoch:

Füllen Sie das Formular mit den Vorlagen- und Erweiterungsinformationen aus. Da diese Informationen öffentlich sein werden, achten Sie besonders darauf.

Sobald der Prozess abgeschlossen ist, speichern Sie einfach und warten Sie auf den Genehmigungsprozess. Das kann einige Minuten dauern.

Fazit

Ich hoffe dieser Artikel hat dir geholfen. Danke, dass Sie es gelesen haben.

Unten sind meine Social Media Profile. Fühlen Sie sich frei, sich zu verbinden und eine Frage zu stellen. In diesen Profilen teile ich häufig Inhalte zu Webtechnologien und IT-Ereignissen.

Twitter: https://twitter.com/alemalavasi Linkedin: https://www.linkedin.com/in/alexandremalavasi/

Ich habe kürzlich auch einen Youtube-Kanal erstellt, um mit dieser Plattform einen Beitrag zur technischen Community zu leisten, der sich auf .NET Core, Vue JS, Azure und mehr konzentriert. Wenn Sie sich für diese Themen interessieren, empfehle ich Ihnen, sich anzumelden. In Kürze werden regelmäßig Inhalte veröffentlicht, während ich Audio, Video und Inhalte einrichte, um Ihnen ein qualitativ hochwertiges Erlebnis zu bieten.

Link: https://www.youtube.com/channel/UC-KFGgYiot1eA8QFqIgLmqA