Visual Studio 2019 Typescript 自定义项模板 [英] Visual Studio 2019 Typescript Custom Item Template

问题描述

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

自定义 ItemTemplate 可以未出现在 Visual Studio 2015 添加新项目对话框中

自定义 ItemTemplate 未显示在 Visual Studio 2010 中 - 添加新项

我认为使用工作模板会起作用，所以我从

复制了一个模板

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

到

C:\Users\\Documents\Visual Studio 2019\Templates\ItemTemplates\JavaScript\Code\reactComponent 并修改它.

reactFuncComp.vstemplate

<小时>

reactFuncComp.tsx

<小时>

import * as React from "react";export const $safeitemname$: React.FunctionComponent = (props) =>{返回 (<div>{props.children}

);}导出默认值 $safeitemname$;

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

C:\Users\\Documents\Visual Studio 2019\Templates\ItemTemplates

我也尝试将新模板复制到我复制它的位置

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

还是什么都没有，是不是我遗漏了什么?

解决方案

我终于看到了这个，我注意到有另一个文件夹包含其他模板，我开始复制

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

C:\Users\\Documents\Visual Studio 2019\Templates\ItemTemplates\ReactFunctionComponent

并修改它.我相信我缺少模板组 ID:

AspNetCore

reactFuncComp.vstemplate

<小时>

reactFuncComp.tsx

<小时>

import * as React from "react";export const $safeitemname$: React.FunctionComponent = (props) =>{返回 (<div>{props.children}

);}导出默认值 $safeitemname$;

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?

解决方案

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

这篇关于Visual Studio 2019 Typescript 自定义项模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！