Cara membuat templat dan ekstensi proyek untuk Visual Studio 2019

Hai!

Baru-baru ini, saya membuat dua templat proyek untuk Vue JS + Asp.Net Core, keduanya sebagai ekstensi Visual Studio 2019. Mereka dibagikan di pasar Visual Studio, seperti yang Anda lihat di tautan di bawah:

  • Templat Vue JS + Asp.Net Core 3.1

Apakah Anda ingin tahu cara membuat ekstensi Anda sendiri dan menerbitkan template Anda sendiri? Jika ya, sisa artikel adalah proses langkah demi langkah tentang cara melakukannya.

Pembuatan proyek

Hal pertama yang harus Anda lakukan adalah membuat proyek yang ingin Anda bagikan sebagai templat. Dalam artikel ini, saya akan menunjukkan langkah demi langkah menggunakan proyek Vue JS + Asp.Net Core yang sudah saya terbitkan.

Ekspor proyek

Setelah proyek dibuat, pada Visual Studio 2019 pergi ke opsi menu Proyek dan pilih opsi "Ekspor Template":

Ada dua jenis templat: Templat proyek dan Templat item. Seperti dalam kasus kami, kami membuat templat proyek, saya memilih opsi yang mendasarinya:

Langkah selanjutnya adalah mengkonfigurasi nama, deskripsi, ikon yang akan ditampilkan kepada pengguna dan pratinjau gambar. Sangat penting untuk mengatur informasi ini dengan benar, sebanyak kualitas tinggi yang Anda bisa, karena akan muncul untuk pengguna akhir yang akan mengunduh dan menginstal template / ekstensi Anda.

Dan hapus centang opsi "Impor secara otomatis ke Visual Studio". Dengan cara itu, Anda dapat menginstal ekstensi yang Anda buat.

Akhirnya, proses akan menghasilkan folder kompak yang berisi template itu sendiri, tetapi itu bukan akhir dari pembuatan:

Definisi tag

Ketika kami membuat proyek baru di Visual Studio 2019, templat muncul bersama dengan beberapa tag tertentu, yang membantu kami memfilter templat:

Karena versi terbaru dari Visual Studio 2019, tag ini wajib bagi mereka yang ingin menerbitkan ekstensi. Tanpa itu, ekstensi akan dipasang, tetapi templat tidak akan pernah ditampilkan dalam daftar, bahkan jika pengguna mencari itu.

Untuk membuat tag ini, buka folder ringkas yang dibuat dengan templat di langkah terakhir dan buka file .vstemplate menggunakan Editor Teks:

Di bagian "Data Templat", tambahkan setelah tag "ProvidDefaultName" referensi daftar tag ke template Anda, seperti platform, jenis proyek, bahasa, dll. Dalam kasus saya, saya menetapkan sebagai berikut:

Daftar tag lengkap yang tersedia dapat ditemukan di tautan di bawah:

Penciptaan Ekstensi

Dengan templat yang sudah dibuat dan set tag, sekarang saatnya membuat file instal untuk ekstensi.

Untuk itu, buat saja proyek dari tipe VSIX Project:

Ini adalah struktur dasar proyek:

PS: namun saya membuat nama proyek menggunakan karakter khusus tertentu sebagai "+", hanya untuk tujuan pengajaran, tolong hindari untuk melakukannya dalam skenario nyata. Lebih baik untuk membuat tanpa spasi kosong atau karakter khusus, seperti itu: TemplateVueJSAspNetCoreArtigoMedium, alih-alih nama yang saya masukkan. Ini akan mencegah masalah pembangunan, karena VS akan menghasilkan ruang nama dan kelas secara otomatis menggunakan nama itu.

Sertakan dalam root referensi folder kompak untuk template Anda. Adalah penting bahwa folder kompak akan berisi perubahan file .vstemplate dengan tag yang saya sebutkan sebelumnya. Jangan lupakan itu.

Proyek ini memiliki file manifes, yang akan berisi informasi tentang ekstensi dan instruksi pemasangan.

Jika Anda mengklik dua kali pada file itu, itu akan terbuka seperti formulir, yang mana Anda dapat mengisi bidang demi bidang.

Ubah dengan hati-hati semua info yang diperlukan dengan kualitas, karena itu akan muncul untuk pengguna akhir di instalasi dan pasar juga. Selain itu, perlu untuk menentukan bidang "Pengarang" dengan benar, karena biasanya memiliki nama LAPTOP.

Setelah itu, klik pada "Aset":

Hapus aset yang ada, jika ada, dan klik "Baru":

Pilih opsi yang saya letakkan dan di path tentukan folder kompak yang telah Anda tambahkan ke proyek.

Generasi

Untuk membuat file instalasi, itu hanya membangun proyek dalam mode rilis. Ini akan menghasilkan file .exe yang digunakan untuk menginstal ekstensi pada VS.

Selesai! Ekstensi kami telah dibuat. Anda dapat mengujinya sekarang, sebelum Anda mempublikasikan di pasar Visual Studio, untuk melihat apakah semuanya bekerja dengan baik.

Publikasi Visual Studio Market

Jika Anda ingin mempublikasikan ekstensi Anda ke publik, Anda bisa melakukannya di Visual Studio Marketplace.

Untuk melakukannya, buka marketplace.visualstudio.com dan, setelah masuk dengan akun Microsoft Anda, buka opsi di bawah ini:

Unggah .exe dari ekstensi Anda:

Isi formulir dengan templat dan info ekstensi. Karena informasi itu bersifat publik, perhatikan secara detail.

Setelah proses selesai, simpan saja dan tunggu proses persetujuannya. Itu bisa memakan waktu beberapa menit.

Kesimpulan

Saya harap artikel ini membantu Anda. Terima kasih sudah membacanya.

Di bawah ini adalah profil media sosial saya. Jangan ragu untuk terhubung dan mengajukan pertanyaan. Dalam profil ini, saya sering berbagi konten tentang Teknologi Web dan acara TI.

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

Saya juga baru-baru ini membuat saluran Youtube untuk berkontribusi pada komunitas teknis menggunakan platform ini juga, berfokus pada .NET Core, Vue JS, Azure dan banyak lagi. Jika Anda tertarik pada mata pelajaran ini, saya sarankan Anda untuk berlangganan. Segera akan dirilis konten secara berkala, sementara saya menyiapkan audio, video, dan konten untuk memberi Anda pengalaman berkualitas tinggi.

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