Tuesday, 17 August 2010

Visual Studio intellisense for HTML 5


It's the time to use the new technologies like HTML 5. Everyone of us knew about what this is and how easy now to generate some nice and rich UI without put much efforts. No complex javascript, no silverlight or flash is required most of the time and many more advantages. There are plenty of changes in CSS too. So, I believe we should start using HTML 5 in our applications. Because almost all browsers are supporting it.
After I have written some posts on Visual Studio intellisense on
Jquery and SharePoint 2010 ECMAscript Client OM, I want to write similar on the intellisense for HTML 5.

This is very simple process than any other we have followed.

1. Download the HTML5 intellisense file from the official vs tools site.
Visual Studio intellisense for HTML 5. Applies to both VS 2010 and VS 2008.
Note: In internet there are few sites already written related to this post. But, they are not providing the valid HTML 5 XSD files. They are downloading files from somewhere else and giving us. Those files are not up to date. So, try to download the files always from the site who created them. In this case Microsoft. The link I have given is official VS tools web site.
2. Now run the file and select the preferences and finish the installer.
3. Now you can see new files updated with the name HTML_5.XSD at the location: C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\Packages\schemas\html [For VS 2008] and C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html [For VS 2010].
4. And the MSI update we have ran automatically updates the registry key and other settings. So, no more changes we have to do manually.
5. Now, if you have opened the Visual Studio, please close it and reopen it.
6. Now, from the Visual Studio toolbars, "HTML Source Editing" we have a drop down for selecting the HTML version as shown below.
7. Once we have selected that option we are good to go and write HTML 5 code as shown below.
8. In the above code sample, I am trying to render a video and it is showing me all the attributes for the video tag.

That is it!!! There we are.
Hope you liked it.

No comments:

Post a Comment