Πώς να δημιουργήσετε πρότυπα έργων και επέκταση για το Visual Studio 2019

Γεια!

Πρόσφατα, δημιούργησα δύο πρότυπα έργων για τον Vue JS + Asp.Net Core, και τα δύο ως επέκταση του Visual Studio 2019. Μοιράστηκαν στην αγορά του Visual Studio, όπως μπορείτε να δείτε στον παρακάτω σύνδεσμο:

  • Πρότυπο Vue JS + Asp.Net Core 3.1

Θα θέλατε να μάθετε πώς μπορείτε να δημιουργήσετε τη δική σας επέκταση και να δημοσιεύσετε το δικό σας πρότυπο; Εάν ναι, το υπόλοιπο άρθρο είναι μια διαδικασία βήμα προς βήμα για το πώς να το κάνετε αυτό.

Δημιουργία έργου

Το πρώτο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε ένα έργο το οποίο θέλετε να μοιραστείτε ως πρότυπο. Σε αυτό το άρθρο, θα επιδείξω βήμα προς βήμα χρησιμοποιώντας το έργο Vue JS + Asp.Net Core που δημοσίευσα ήδη.

Εξαγωγή έργου

Μόλις δημιουργηθεί το έργο, στο Visual Studio 2019 μεταβείτε στην επιλογή μενού Έργου και επιλέξτε την επιλογή "Εξαγωγή προτύπου":

Υπάρχουν δύο τύποι προτύπων: Πρότυπο εργασίας και Πρότυπο στοιχείου. Όπως και στην περίπτωση μας δημιουργούμε ένα πρότυπο έργου, επέλεξα την υποκείμενη επιλογή:

Το επόμενο βήμα είναι να διαμορφώσετε το όνομα, την περιγραφή, το εικονίδιο που θα εμφανίζεται στους χρήστες και την προεπισκόπηση εικόνας. Είναι πολύ σημαντικό να ρυθμίζετε σωστά αυτές τις πληροφορίες όσο και την υψηλή ποιότητα που μπορείτε, επειδή θα εμφανιστούν στους τελικούς χρήστες που θα κατεβάσουν και θα εγκαταστήσουν το πρότυπο / επέκταση σας.

Καταργήστε την επιλογή "Αυτόματη εισαγωγή στο Visual Studio". Με αυτόν τον τρόπο, θα μπορείτε να εγκαταστήσετε την επέκταση που δημιουργείτε.

Τέλος, η διαδικασία θα δημιουργήσει ένα συμπαγές φάκελο που περιέχει το ίδιο το πρότυπο, αλλά δεν είναι το τέλος της δημιουργίας:

Ορισμός ετικετών

Όταν δημιουργούμε ένα νέο έργο στο Visual Studio 2019, τα πρότυπα εμφανίζονται μαζί με κάποιες συγκεκριμένες ετικέτες που μας βοηθούν να φιλτράρουμε τα πρότυπα:

Από την τελευταία έκδοση του Visual Studio 2019, αυτές οι ετικέτες είναι υποχρεωτικές για όσους θέλουν να δημοσιεύσουν μια επέκταση. Χωρίς αυτές, θα εγκατασταθεί η επέκταση, αλλά το πρότυπο δεν θα εμφανιστεί ποτέ στη λίστα, ακόμα κι αν ο χρήστης το ψάξει.

Για να δημιουργήσετε αυτές τις ετικέτες, ανοίξτε το συμπαγές φάκελο που δημιουργήθηκε με το πρότυπο στο τελευταίο βήμα και ανοίξτε το αρχείο .vstemplate χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας κειμένου:

Στην ενότητα "Δεδομένα προτύπου", προσθέστε, μετά την ετικέτα "ProvideDefaultName", την αναφορά της λίστας ετικετών στο πρότυπό σας, όπως η πλατφόρμα, ο τύπος έργου, η γλώσσα κ.λπ. Στην περίπτωσή μου, έχω ορίσει ως εξής:

Η πλήρης λίστα διαθέσιμων ετικετών μπορεί να βρεθεί στον παρακάτω σύνδεσμο:

Δημιουργία της επέκτασης

Με το ήδη δημιουργημένο πρότυπο και τις ετικέτες που έχουν οριστεί, τώρα είναι καιρός να δημιουργήσετε το αρχείο εγκατάστασης για την επέκταση.

Για αυτό, απλά δημιουργήστε ένα έργο του τύπου VSIX Project:

Αυτή είναι η βασική δομή του έργου:

PS: Ωστόσο, δημιούργησα το όνομα του έργου με τη χρήση ορισμένων ειδικών χαρακτήρων ως "+", μόνο για λόγους διδασκαλίας, αποφύγετε να το κάνετε αυτό σε πραγματικά σενάρια. Είναι καλύτερα να δημιουργήσετε χωρίς κενά διαστήματα ή ειδικούς χαρακτήρες, όπως αυτό: TemplateVueJSAspNetCoreArtigoMedium, αντί για το όνομα που έβαλα. Θα αποτρέψει την δημιουργία προβλημάτων, επειδή το VS θα δημιουργήσει αυτόματα χώρους ονομάτων και κλάσεις χρησιμοποιώντας αυτό το όνομα.

Συμπεριλάβετε στη ρίζα την αναφορά του μικρού φακέλου στο πρότυπό σας. Είναι σημαντικό ο συμπαγής φάκελος να περιέχει τις αλλαγές του αρχείου .vstemplate με τις ετικέτες που ανέφερα προηγουμένως. Μην το ξεχνάτε.

Αυτό το έργο έχει ένα πρόδηλο αρχείο, το οποίο θα περιέχει τις πληροφορίες σχετικά με τις οδηγίες εγκατάστασης επέκτασης e.

Εάν κάνετε διπλό κλικ σε αυτό το αρχείο, θα είναι ανοιχτό σαν μια φόρμα, την οποία μπορείτε να συμπληρώσετε στο πεδίο πεδίου.

Αλλάξτε προσεκτικά όλες τις απαραίτητες πληροφορίες με την ποιότητα, επειδή θα εμφανιστεί στον τελικό χρήστη στην εγκατάσταση και στην αγορά επίσης. Επίσης, είναι απαραίτητο να καθορίσετε σωστά το πεδίο "Συγγραφέας", επειδή συνήθως έχει το όνομα LAPTOP.

Στη συνέχεια, κάντε κλικ στο "Στοιχεία ενεργητικού":

Καταργήστε τα υπάρχοντα στοιχεία, σε περίπτωση που υπάρχουν, και κάντε κλικ στο "Νέα":

Επιλέξτε τις επιλογές που έβαλα και στο μονοπάτι καθορίστε τον συμπαγή φάκελο που έχετε προσθέσει στο έργο.

Γενιά

Για να δημιουργήσετε το αρχείο εγκατάστασης, απλά δημιουργείτε το έργο σε λειτουργία απελευθέρωσης. Θα δημιουργήσει το αρχείο .exe που χρησιμοποιείται για την εγκατάσταση της επέκτασης σε VS.

Εγινε! Η επέκτασή μας δημιουργήθηκε. Μπορείτε να το δοκιμάσετε τώρα, προτού δημοσιεύσετε στην αγορά του Visual Studio, για να δείτε αν όλα λειτουργούν καλά.

Δημοσίευση της αγοράς του Visual Studio

Σε περίπτωση που θέλετε να δημοσιεύσετε την επέκτασή σας στο κοινό, μπορείτε να το κάνετε αυτό στο Visual Studio Marketplace.

Για να το κάνετε αυτό πηγαίνετε στο marketplace.visualstudio.com και, αφού συνδεθείτε με το λογαριασμό σας στη Microsoft, μεταβείτε στις παρακάτω επιλογές:

Ανεβάστε το .exe της επέκτασής σας:

Συμπληρώστε τη φόρμα με το πρότυπο και τις πληροφορίες επέκτασης. Καθώς αυτές οι πληροφορίες θα είναι δημόσιες, δώστε προσοχή λεπτομερώς.

Μόλις τελειώσει η διαδικασία, απλά αποθηκεύστε και περιμένετε τη διαδικασία έγκρισης. Αυτό θα μπορούσε να διαρκέσει μερικά λεπτά.

συμπέρασμα

Ελπίζω ότι αυτό το άρθρο σας βοήθησε. Σας ευχαριστώ που το διαβάσατε.

Παρακάτω είναι τα προφίλ κοινωνικών μέσων μου. Μη διστάσετε να συνδεθείτε και να θέσετε μια ερώτηση. Σε αυτά τα προφίλ, μοιράζομαι συχνά περιεχόμενο σχετικά με τεχνολογίες ιστού και εκδηλώσεις πληροφορικής.

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

Δημιούργησα επίσης πρόσφατα ένα κανάλι του Youtube για να συνεισφέρω στην τεχνική κοινότητα χρησιμοποιώντας αυτήν την πλατφόρμα, καθώς εστιάσαμε σε .NET Core, Vue JS, Azure και πολλά άλλα. Εάν ενδιαφέρεστε για αυτά τα θέματα, σας συνιστώ να εγγραφείτε. Σύντομα θα κυκλοφορήσει περιεχόμενο τακτικά, ενώ ρυθμίζω ήχο, βίντεο και περιεχόμενο για να σας δώσω μια υψηλής ποιότητας εμπειρία.

Σύνδεσμος: https://www.youtube.com/channel/UC-KFGgYiot1eA8QFqIgLmqA