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 blog post by Zander Martineau 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 “Item Templates” in Visual Stuido.
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.
Adding a Page Template
So here’s the basic HTML5 template I wanted to include:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!-- !CSS --> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <!-- !Modernizr - All other JS at bottom <script src="js/modernizr-1.5.min.js"></script> --> <!-- Grab Microsoft's or Google's CDN'd jQuery. fall back to local if necessary --> <!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> --> <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> --> <script> !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script> </head> <body> <div id="container"> </div> </body> </html> |
After I created and saved this page, I went to “File->Export Template…” and followed these steps:
Now, when I select “File->New File…” to add a new item, my template is available:
Adding a Web Site Template
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:
- My HTML5 basic page template
- jQuery
- Modernizr
- HTML5 Reset CSS file
- An empty CSS file called style.css
- A consistent folder structure for all of these
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:
So now when I select “File=>New Web Site” I see my new template:
and when I choose that, here’s what gets loaded for my new site:
Download the Templates
Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. Check it out here.
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:
Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder
Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder
Related posts:
- jQuery JavaScript Templates Tutorial: Nesting Templates In my last post, I presented an intro to how...
- Not Using jQuery JavaScript Templates? You’re Really Missing Out. In preparation for my upcoming talk on jQuery Templates, I’ve...
- jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks So far in my series on jQuery JavaScript Templating, I’ve...
- How to Easily Inject jQuery into any Web Page I use jQuery…a lot. It just makes JavaScript development much...
- I’m Presenting on jQuery Templates at ThinkVitamin’s jQuery Online Conference This coming Monday (7/12/2010), I’ll be one of the speakers...