Custom item template in Visual Studio

Так повелось, что людям проще и приятнее делать то, что им нравится, то к чему они привыкли. А разработчики, как никто другой должны ценить своё время и с каждым разом находить новые решения.

Решение, представленное здесь простое в реализации, но позволяет экономить значительную часть времени разработки. Я хочу сказать о шаблонах элементов Вашего проекта. Зачастую такими элементами являются не только файлы *.cs; *.js; *.cpp, а сложные древовидные структуры каталогов, взаимосвязанных файлов и временами ссылок.

С целью облегчения процесса добавления такого сложного, составного элемента Вы можете настроить шаблон и использоватьего столько раз, сколько захотите. А ещё одним преимуществом является то, что им можно поделиться с коллегой и сэкономить ещё час на вечерний кофе.

Подготовка

Для создания шаблона нам потребуется только идея и текстовый редактор. Мы будем создавать шаблон компонента для библиотеки knockout.js, который сосоит из двух файлов: html разметки и js-ой модели.

В своём проекте мы с коллегами используем require.js поэтому файл с моделью я сразу создам не пустой, а с небольшими набросками, опять же, для удобства.

Вот содержимое моего файла component.js. Имена файлов можно использовать любые, главное указать их в конфигурации представленной ниже.

define([
  'knockout'
], function (ko) {
  'use strict';

  return function (params) {

    initialize();

    function dispose() {
    }

    function initialize() {
    }

    return {
      dispose: dispose
    };
  };
});

Файл с разметкой component.html я оставляю пустым, так как единого шаблона не удалось выделить, корневые элементы всегда различны div; input; select; ul и прочие.

Файл с картинкой должен быть в формате ICO. Без труда Вы найдёте любой конвертер онлайн в интернете либо воспользуетесь хорошим редактором для его создания.

Настройка

Чтобы шаблон стал доступен в меню добавления  элемента в проект необходимо:

1. Положить все файлы в папку C:\Users\<user_name>\Documents\Visual Studio 2013\Templates\ItemTemplates\JavaScript\<template_name>
2. Перезапустить Visual Studio.

Главный файл <template_name>.vstemplate для моего решения представлен ниже

<VSTemplate Version="3.0.0" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" Type="Item">
  <TemplateData>
    <DefaultName>Knockout-component.js</DefaultName>
    <Name>Knockout component</Name>
    <Description>&lt;No description available&gt;</Description>
    <ProjectType>CSharp</ProjectType>
    <SortOrder>10</SortOrder>
    <Icon>__TemplateIcon.ico</Icon>
  </TemplateData>
  <TemplateContent>
    <References />
    <ProjectItem SubType="" TargetFileName="$fileinputname$/$fileinputname$.js" ReplaceParameters="true">component.js</ProjectItem>
    <ProjectItem SubType="" TargetFileName="$fileinputname$/$fileinputname$.html" ReplaceParameters="true">component.html</ProjectItem>
  </TemplateContent>
</VSTemplate>

Обратите внимание на конструкцию вида $fileinputname$/$fileinputname$.html. С её помощью можо задавать любые пути для указания конечного местонахождение копируемых файлов после добавления элемента в проект.

Список файлов директории с шаблоном

29.06.2015  08:54                 3 component.html
29.06.2015  11:36               247 component.js
29.06.2015  11:34               751 ko-component.vstemplate
29.06.2015  08:52            10 134 __TemplateIcon.ico
               4 File(s)         11 135 bytes

Вот и всё, Ваш шаблон готов, перезагрузите IDE и пользуйтесь.