How to create project templates and extension for Visual Studio 2019

Tags: dotnet, aspnet, visualstudio
Published: 2020-01-08 21:54:06

Hi!

Recently, I created two project templates for Vue JS + Asp.Net Core, both of them as Visual Studio 2019 extensions. They were shared on Visual Studio marketplace, as you can see at the link below:

https://medium.com/@alexandre.malavasi/update-template-vue-js-asp-net-core-3-1-visual-studio-2019-caf13caab34b

Would you like to know how to create your own extension and publish your own template? If yes, the rest of the article is a step by step process on how to do that.


**Project creation**

The first thing you have to do is to create a project that you want to share as a template. In this article, I’ll demonstrate step by step using the Vue JS + Asp.Net Core project I already published.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9ux7pcb4zh20b0vnomgo.png)

**Project export**

Once the project is created, on Visual Studio 2019 go to Project menu option and choose the option “Export Template”:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/laiq6pziic39xtp2c7hv.png)

There are two types of templates: Project template and Item template. As in our case we are creating a project template, I selected the underlying option:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lroo99k02ul2jyu7q3d0.png)


The next step is to configure the name, description, icon that will be shown to users and the image preview. It is really important to set this information properly, as much as high quality you can, because it will appear to final users who will download and install your template/extension.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/78g0tu0br5urrrnmyad7.png)


And uncheck the option “Automatically import to Visual Studio”. In that way, you’ll be able to install the extension that you are creating.
Finally, the process will generate a compact folder which contains the template itself, but it is not the end of the creation:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fq485iylvb1ybxnnopkw.png)

**Tags definition**

When we create a new project on Visual Studio 2019, the templates appear together with some specific tags, that help us to filter the templates:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wxbpzbgxz297y8z2rf5s.png)


Since the latest version of Visual Studio 2019, these tags are mandatory for those who want to publish an extension. Without those, the extension will be installed, but the template will never be shown in the list, even if the user searches that.

To create these tags, open the compact folder that was generated with the template in the last step and open the .vstemplate file using a Text Editor:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/llhrijgluq0vsc5dga87.png)

In the section “Template Data”, add after the tag “ProvideDefaultName” the tag list reference to your template, such as platform, project type, language, etc. In my case, I specified as follows:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/aiccv9ts5v80ns2iqn39.png)

The full available tag list can be found at the link below:

https://docs.microsoft.com/en-us/visualstudio/ide/template-tags?view=vs-2019#built-in-tags


**Creation of the Extension**

With the template already created and the tags set, now it is time to create the install file for the extension.

For that, just create a project of the type VSIX Project:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oyxcjatlhnfke029jtn1.png)

This is the basic structure of the project:
**PS:** however I created the project name using certain special characters as “+”, just for teaching purposes, please avoid to do that in real scenarios. It is better to create without any empty spaces or special characters, like that: **TemplateVueJSAspNetCoreArtigoMedium**, instead of the name I put. It will prevent build issues, because of the VS will generate automatically namespaces and classes using that name.


Include in the root the compact folder reference to your template. It is important that the compact folder would contain the .vstemplate file changes with the tags I mentioned before. Don’t forget that.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0i68b44hqzyxheravqu2.png)

This project has a manifest file, that will contain the information on the extension e installation instructions.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/klhq0vkxwymh1883h8am.png)

If you double click in that file, it will be open like a form, which one you can fill in field by field.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vdxhr2m542tetv7ynihz.png)

Change carefully all the necessary info with quality, because it will appear to final user in the installation and marketplace as well. Also, it is necessary to specify the field “Author” properly, because it is normally has the LAPTOP name.


After that, click at “Assets”:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tfwbwtepd8m1fzsdhfku.png)

Remove the existent assets, in case of there are, and click in “New”:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/izhyx37bz52ixe0gb4wd.png)


Choose the options that I put and in the path specify the compact folder that you have added to the project.


**Generation**

To create the installation file, it is just building the project in release mode. It will generate the .exe file used to install the extension on VS.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s8bcgzmr496sqvbyw5sy.png)


Done! Our extension was created. You can test it now, before you publish on the Visual Studio marketplace, to see if everything is working fine.

**Visual Studio Market Publish**

In case you want to publish your extension to the public, you can do that on Visual Studio Marketplace.

To do that go to marketplace.visualstudio.com and, after log in with your Microsoft account, go to the options below:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3cr9iejzp2w9rsrcz6cq.png)

Upload the .exe of your extension:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wc4j33w2acqcku60n2ai.png)

Fill in the form with the template and extension info. As that information will be public, pay attention in detail.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/he5hsn633cbxtawf4qht.png)

Once the process is finished, just save and wait for the approval process. That could take a few minutes.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9wvmnmf8yzbji0dgalvm.png)


**Conclusion**

I hope this article helped you. Thank you for reading it.