Now that I work at Microsoft, I'm using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it's pretty barebones. Since I'm focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag. 

Today, I noticed a <a href="http://rathersplendid.net/home/coda-clip-library-for-html5">blog post by Zander Martineau</a> in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create <a href="http://msdn.microsoft.com/en-us/library/tsyyf0yh.aspx">"Item Templates" in Visual Stuido</a>.

The gist of it is that you can take any page that you create and turn it into a re-usable template via the "File->Export Template..." wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template. 

<h2>Adding a Page Template</h2>

So here's the basic HTML5 template I wanted to include:

[code language="html"]
&lt;!DOCTYPE html&gt;   
&lt;html lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot; /&gt;
	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;
	&lt;title&gt;&lt;/title&gt;
	&lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
	&lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
	&lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;
	
    &lt;!-- !CSS --&gt;
    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot;&gt;
	
    &lt;!-- !Modernizr - All other JS at bottom 
	&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt; --&gt;

	&lt;!-- Grab Microsoft's or Google's CDN'd jQuery. fall back to local if necessary --&gt;
    &lt;!-- &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; --&gt;
	&lt;!-- &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;
	&lt;script&gt;	    !window.jQuery &amp;&amp; document.write('&lt;script src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;\/script&gt;')&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
	&lt;div id=&quot;container&quot;&gt;

	&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
[/code]

After I created and saved this page, I went to "File->Export Template..." and followed these steps:

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-1-300x236.png" alt="" title="export-1" width="300" height="236" class="alignleft size-medium wp-image-1360" /></a>

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-2-300x236.png" alt="" title="export-2" width="300" height="236" class="alignleft size-medium wp-image-1361" /></a>

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-3.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-3-300x236.png" alt="" title="export-3" width="300" height="236" class="alignleft size-medium wp-image-1362" /></a>

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-4.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-4-300x236.png" alt="" title="export-4" width="300" height="236" class="alignleft size-medium wp-image-1363" /></a>

Now, when I select "File->New File..." to add a new item, my template is available:

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/export-5.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/export-5-300x207.png" alt="" title="export-5" width="300" height="207" class="alignleft size-medium wp-image-1364" /></a>

<h2>Adding a Web Site Template</h2>

Creating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn't want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:

<ul>
<li>My HTML5 basic page template</li>
<li>jQuery</li>
<li>Modernizr</li>
<li>HTML5 Reset CSS file</li>
<li>An empty CSS file called style.css</li>
<li>A consistent folder structure for all of these</li>
</ul>

The first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-1-300x236.png" alt="" title="project-1" width="300" height="236" class="alignleft size-medium wp-image-1369" /></a>

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/project-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/project-2-300x236.png" alt="" title="project-2" width="300" height="236" class="alignleft size-medium wp-image-1370" /></a>

So now when I select "File=>New Web Site" I see my new template:

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/template-choice-300x207.png" alt="" title="template-choice" width="300" height="207" class="alignleft size-medium wp-image-1371" /></a>

and when I choose that, here's what gets loaded for my new site:

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/solution-explorer.png" alt="" title="solution-explorer" width="210" height="285" class="alignleft size-full wp-image-1372" /></a>

<h2>Download the Templates</h2>

This is a huge time-saver for me and I want to share this. I've made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:

<a href='http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Page-Template.zip'>HTML5 Page Template</a>

Drop this into "Visual Studio 2010 > Templates > ItemTemplates" folder

<a href='http://blog.reybango.com/wp-content/uploads/2010/09/HTML5-Web-Site.zip'>HTML5 Web Site Template</a>

Drop this into "Visual Studio 2010 > Templates > ProjectTemplates" folder