Cómo crear plantillas de proyecto y extensiones para Visual Studio 2019

¡Hola!

Recientemente, creé dos plantillas de proyecto para Vue JS + Asp.Net Core, ambas como extensiones de Visual Studio 2019. Se compartieron en el mercado de Visual Studio, como puede ver en el siguiente enlace:

  • Plantilla Vue JS + Asp.Net Core 3.1

¿Le gustaría saber cómo crear su propia extensión y publicar su propia plantilla? En caso afirmativo, el resto del artículo es un proceso paso a paso sobre cómo hacerlo.

Creación de proyectos

Lo primero que debe hacer es crear un proyecto que desee compartir como plantilla. En este artículo, demostraré paso a paso usando el proyecto Vue JS + Asp.Net Core que ya publiqué.

Exportación de proyectos

Una vez creado el proyecto, en Visual Studio 2019 vaya a la opción del menú Proyecto y elija la opción "Exportar plantilla":

Hay dos tipos de plantillas: plantilla de proyecto y plantilla de artículo. Como en nuestro caso estamos creando una plantilla de proyecto, seleccioné la opción subyacente:

El siguiente paso es configurar el nombre, la descripción, el icono que se mostrará a los usuarios y la vista previa de la imagen. Es realmente importante establecer esta información correctamente, tanto como sea posible, ya que aparecerá a los usuarios finales que descargarán e instalarán su plantilla / extensión.

Y desmarque la opción "Importar automáticamente a Visual Studio". De esa manera, podrá instalar la extensión que está creando.

Finalmente, el proceso generará una carpeta compacta que contiene la plantilla en sí, pero no es el final de la creación:

Definición de etiquetas

Cuando creamos un nuevo proyecto en Visual Studio 2019, las plantillas aparecen junto con algunas etiquetas específicas, que nos ayudan a filtrar las plantillas:

Desde la última versión de Visual Studio 2019, estas etiquetas son obligatorias para aquellos que desean publicar una extensión. Sin ellos, la extensión se instalará, pero la plantilla nunca se mostrará en la lista, incluso si el usuario la busca.

Para crear estas etiquetas, abra la carpeta compacta que se generó con la plantilla en el último paso y abra el archivo .vstemplate con un Editor de texto:

En la sección "Datos de plantilla", agregue después de la etiqueta "ProvideDefaultName" la referencia de la lista de etiquetas a su plantilla, como plataforma, tipo de proyecto, idioma, etc. En mi caso, especifiqué lo siguiente:

La lista completa de etiquetas disponibles se puede encontrar en el siguiente enlace:

Creación de la extensión

Con la plantilla ya creada y las etiquetas establecidas, ahora es el momento de crear el archivo de instalación para la extensión.

Para eso, simplemente cree un proyecto del tipo Proyecto VSIX:

Esta es la estructura básica del proyecto:

PD: sin embargo, creé el nombre del proyecto usando ciertos caracteres especiales como "+", solo para fines de enseñanza, evite hacerlo en escenarios reales. Es mejor crear sin espacios vacíos o caracteres especiales, como ese: TemplateVueJSAspNetCoreArtigoMedium, en lugar del nombre que puse. Evitará problemas de compilación, ya que VS generará automáticamente espacios de nombres y clases con ese nombre.

Incluya en la raíz la referencia de carpeta compacta a su plantilla. Es importante que la carpeta compacta contenga los cambios del archivo .vstemplate con las etiquetas que mencioné antes. No te olvides de eso.

Este proyecto tiene un archivo de manifiesto que contendrá la información en la extensión e instrucciones de instalación.

Si hace doble clic en ese archivo, se abrirá como un formulario, que puede completar campo por campo.

Cambie cuidadosamente toda la información necesaria con calidad, porque también aparecerá para el usuario final en la instalación y el mercado. Además, es necesario especificar el campo "Autor" correctamente, ya que normalmente tiene el nombre LAPTOP.

Después de eso, haga clic en "Activos":

Elimine los activos existentes, en caso de que existan, y haga clic en "Nuevo":

Elija las opciones que puse y en la ruta especifique la carpeta compacta que ha agregado al proyecto.

Generacion

Para crear el archivo de instalación, solo está construyendo el proyecto en modo de lanzamiento. Generará el archivo .exe utilizado para instalar la extensión en VS.

¡Hecho! Nuestra extensión fue creada. Puede probarlo ahora, antes de publicar en el mercado de Visual Studio, para ver si todo funciona bien.

Visual Studio Market Publish

En caso de que desee publicar su extensión al público, puede hacerlo en Visual Studio Marketplace.

Para hacerlo, vaya a marketplace.visualstudio.com y, después de iniciar sesión con su cuenta de Microsoft, vaya a las siguientes opciones:

Cargue el .exe de su extensión:

Rellene el formulario con la plantilla y la información de extensión. Como esa información será pública, preste atención en detalle.

Una vez que el proceso haya finalizado, solo guarde y espere el proceso de aprobación. Eso podría tomar unos minutos.

Conclusión

Espero que este artículo te haya ayudado. Gracias por leerlo.

A continuación están mis perfiles de redes sociales. Siéntase libre de conectarse y hacer una pregunta. En estos perfiles, con frecuencia comparto contenido sobre tecnologías web y eventos de TI.

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

También creé recientemente un canal de Youtube para contribuir a la comunidad técnica utilizando esta plataforma, centrada en .NET Core, Vue JS, Azure y más. Si está interesado en estos temas, le recomiendo que se suscriba. Pronto se lanzará contenido regularmente, mientras configuro audio, video y contenido para brindarle una experiencia de alta calidad.

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