Visual Studio 2019 Typescript Custom Item Template

Question

I am trying to create a Custom Item Template in Visual Studio 2019, I tried starting with exporting an existing file in my project using Project->Export Template and left all the defaults as is. But no matter where the file was copied to it doesn't show up in Solution Explorer->Context Menu->Add->New Item I searched through all the groups and it didn't show up. I found a couple of other questions regarding this but none of them seemed to work.

Custom ItemTemplate does not appear in Visual Studio 2015 Add New Item dialog

Custom ItemTemplate not showing up in Visual Studio 2010 - Add New Item

I figured using a working template would work so I copied a template from

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\ItemTemplates\JavaScript\Code\tsxfile

to

C:\Users\<user>\Documents\Visual Studio 2019\Templates\ItemTemplates\JavaScript\Code\reactComponent and modified it.

reactFuncComp.vstemplate

---

<?xml version="1.0" encoding="utf-8"?>
<VSTemplate Version="3.0.0" Type="Item" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005">
  <TemplateData>
    <Name>React Function Component</Name>
    <Description>React Function Component</Description>
    <Icon Package="{2ffe45c4-5c73-493c-b187-f2e955ff875e}" ID="3"></Icon>
    <TemplateID>ReactFunctionComponent.tsxfile</TemplateID>
    <NumberOfParentCategoriesToRollUp>1</NumberOfParentCategoriesToRollUp>
    <DefaultName>reactComponent.tsx</DefaultName>
    <!-- TypeScript project capability is applicable to all JavaScript projects -->
    <!-- "ShowByDefault = false" is needed for the "AppliesTo" to apply the condition(s) to projects that don't restrict specific templates -->
    <ProjectType>JavaScript</ProjectType>
    <ShowByDefault>false</ShowByDefault>
    <AppliesTo>JavaScript</AppliesTo>
  </TemplateData>
  <TemplateContent>
    <ProjectItem SubType="Code" ItemType="TypeScriptCompile" TargetFileName="$fileinputname$.tsx" ReplaceParameters="true">reactFuncComp.tsx</ProjectItem>
  </TemplateContent>
</VSTemplate>

reactFuncComp.tsx

---

import * as React from "react";

export const $safeitemname$: React.FunctionComponent = (props) => {

    return (
        <div>
            {props.children}
        </div>
    ); 
}

export default $safeitemname$;

I double checked that the template location was right, under Tools->Options->Projects and Solutions->Locations and it is pointing to

C:\Users\<user>\Documents\Visual Studio 2019\Templates\ItemTemplates

I also tried copying the new template to the location that I copied it from

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\ItemTemplates\JavaScript\Code\reactFuncComp

and still nothing, is there something that I am missing?

Answer 1

I finally got this to show up, I noticed that there was another folder that contained other templates, I started with copying

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\ItemTemplates\AspNetCore\Web\Scripts\1033\TypeScriptJsxFile to

C:\Users\<user>\Documents\Visual Studio 2019\Templates\ItemTemplates\ReactFunctionComponent

and modified it. I believe I was missing the template group ID:

<TemplateGroupID>AspNetCore</TemplateGroupID>

reactFuncComp.vstemplate

---

<?xml version="1.0" encoding="utf-8"?>
<VSTemplate Version="3.0.0" Type="Item" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005">
  <TemplateData>
    <Name>React Function Component</Name>
    <Description>React Function Component template file</Description>
    <Icon Package="{2ffe45c4-5c73-493c-b187-f2e955ff875e}" ID="3"></Icon>
    <ProjectType>CSharp</ProjectType>
    <TemplateGroupID>AspNetCore</TemplateGroupID>
    <TemplateID>ReactFunctionComponent</TemplateID>
    <NumberOfParentCategoriesToRollUp>3</NumberOfParentCategoriesToRollUp>
    <DefaultName>reactComp.tsx</DefaultName>
    <SortOrder>1</SortOrder>
    <ShowByDefault>false</ShowByDefault>
  </TemplateData>
  <TemplateContent>
    <ProjectItem SubType="Code" TargetFileName="$fileinputname$.tsx" ReplaceParameters="true">reactFuncComp.tsx</ProjectItem>
  </TemplateContent>
</VSTemplate>

reactFuncComp.tsx

---

import * as React from "react";

export const $safeitemname$: React.FunctionComponent = (props) => {

    return (
        <div>
            {props.children}
        </div>
    ); 
}

export default $safeitemname$;