Visual Studio 2019打字稿自定义项模板

Question

我试图在Visual Studio 2019中创建自定义项模板，我尝试从使用Project->Export Template导出项目中的现有文件开始，并保留所有默认设置。但是无论将文件复制到哪里，都不会在Solution Explorer->Context Menu->Add->New Item中显示出来，我在所有组中进行了搜索，但都没有显示出来。 我发现了其他一些与此相关的问题，但似乎都没有。

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

我认为使用有效的模板会起作用，所以我从复制了模板

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

到

C:\Users\<user>\Documents\Visual Studio 2019\Templates\ItemTemplates\JavaScript\Code\reactComponent并对其进行了修改。

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$;

我再次检查了模板位置在Tools->Options->Projects and Solutions->Locations下是否正确，并且它指向了

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

我还尝试将新模板复制到我从

复制的位置

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

仍然没有，我缺少什么吗？

Answer 1

我终于明白了，发现另一个文件夹包含其他模板，我从复制开始

'use strict';至

<script src="/path/to/file_using_use_strict.js"></script> <script src="/path/to/file_omitting_use_strict.js"></script> <script> console.log('Hello! Am I strict?'); </script>

并对其进行了修改。我相信我缺少模板组ID：

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

reactFuncComp.vstemplate

---

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

reactFuncComp.tsx

---

<TemplateGroupID>AspNetCore</TemplateGroupID>