כיצד ליצור תבניות פרוייקט והרחבה עבור 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:

זהו המבנה הבסיסי של הפרויקט:

נ.ב: עם זאת יצרתי את שם הפרויקט באמצעות תווים מיוחדים מסוימים כ- "+", רק למטרות הוראה, אנא הימנע לעשות זאת בתרחישים אמיתיים. עדיף ליצור ללא רווחים ריקים או תווים מיוחדים, כאלה: TemplateVueJSAspNetCoreArtigoMedium, במקום השם ששמתי. זה ימנע בעיות בניה, בגלל ה- VS תייצר אוטומטית מרחבי שמות ומחלקות המשתמשות בשם זה.

כלול בשורש את הפניה לתיקייה הקומפקטית לתבנית שלך. חשוב שהתיקיה הקומפקטית תכיל את שינויי הקובץ .vstemplate עם התגים שציינתי קודם. אל תשכח את זה.

לפרויקט זה יש קובץ מניפסט, שיכיל את המידע על הוראות ההתקנה של התוסף.

אם תלחץ לחיצה כפולה על קובץ זה, הוא יהיה פתוח כמו טופס, איזה קובץ תוכל למלא בשדה אחר שדה.

שנה בזהירות את כל המידע הדרוש באיכות, מכיוון שהוא יופיע למשתמש הסופי גם בהתקנה ובשוק. כמו כן, יש צורך לציין את השדה "מחבר" ​​כראוי, מכיוון שבדרך כלל יש לו את ה- LAPTOP.

לאחר מכן, לחץ על "נכסים":

הסר את הנכסים הקיימים, במקרה שישנם ולחץ על "חדש":

בחר באפשרויות ששמתי ובנתיב ציין את התיקיה הקומפקטית שהוספת לפרויקט.

דור

כדי ליצור את קובץ ההתקנה, זה רק בניית הפרויקט במצב שחרור. זה יפיק את קובץ ה- exe המשמש להתקנת התוסף ב- VS.

בוצע! התוסף שלנו נוצר. אתה יכול לבדוק את זה עכשיו, לפני שאתה מפרסם בשוק Visual Studio, כדי לבדוק אם הכל עובד בסדר.

Visual Studio Market מפרסם

אם תרצה לפרסם את התוסף שלך לציבור, תוכל לעשות זאת ב- Visual Studio Marketplace.

לשם כך, עבור אל marketplace.visualstudio.com ולאחר התחברות לחשבון Microsoft שלך, עבור אל האפשרויות הבאות:

העלה את .exe של התוסף שלך:

מלא את הטופס בתבנית ופרטי התוסף. מכיוון שמידע זה יהיה ציבורי, שימו לב לפרטי פרטים.

לאחר סיום התהליך, פשוט שמור והמתן לתהליך האישור. זה יכול לקחת כמה דקות.

סיכום

אני מקווה שמאמר זה עזר לך. תודה שקראתם.

להלן פרופילי המדיה החברתית שלי. אל תהסס להתחבר ולשאול שאלה. בפרופילים אלה אני מרבה לשתף תוכן אודות טכנולוגיות אינטרנט ואירועי IT.

טוויטר: https://twitter.com/alemalavasi Linkedin: https://www.linkedin.com/in/alexandremalavasi/

יצרתי לאחרונה גם ערוץ Youtube לתרום לקהילה הטכנית שמשתמשת בפלטפורמה זו, גם היא ממוקדת ב- .NET Core, Vue JS, Azure ועוד. אם אתה מעוניין בנושאים אלה, אני ממליץ לך להירשם. בקרוב ישוחרר תוכן באופן קבוע, בזמן שאני מגדיר אודיו, וידאו ותוכן בכדי להעניק לך חוויה איכותית.

קישור: https://www.youtube.com/channel/UC-KFGgYiot1eA8QFqIgLmqA