What’s new in Visual Studio 2013: HTML Features

This time the entry is in English, as this will be a complete series and there will also a pdf version available of every entry!
You find the PDF version of this blog entry: here

Introduction

The new HTML features in Visual Studio 2013 make life for every web developer easier. It comes with a brand new HTML Editor. It offers great new features which are described below. I would love to get some feedback from you about this document by dropping me an email to: hamboeck@soft-dat.com
And let’s start with the first tip: You might be used to the Designer and Split View in the editor. By default now static HTML files when opened in VS 2013, do not come with them, but you are free to enable them back by right clicking any HTML file -> Open With -> HTML (Web Forms) Editor > Set as Default > OK.
Requirements
To follow the samples below, you need a working installation of Visual Studio 2013 on your machine (any edition will do).

Additional Downloads

Not an absolute requirement, but a recommendation is to download and install VSWebExtensions into Visual Studio. You find the download here: http://vswebessentials.com/
Web Essentials extends Visual Studio with a lot of new features that web developers have been missing for many years. If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life as a developer easier.

Setup

Setup a brand new sample project using Visual Studio 2013:

Create a new ASP.Net Empty Web Application Name: NewWebFeatures Location: C:\VS2013New Click: OK

Add a new HTML page and accept the default name (HtmlPage1.html) Right click on the project Click on: Add Click on: Html Page Click: OK

You see now a new script window with HTML5 tags

Auto complete brackets

If you type some kind of bracket in Visual Studio 2013, you will see that the editor now auto closes these brackets. This feature is available “everywhere”, for example here in the html code, but also in scripts, markup and so on.

HTML5 Intellisense support

Select the complete text Type: html and press tab -> You see a html page using the Html4 doctype tag Type: html5 and press tab You see (again) a html page using html5 doctype tag
After the head element type: header and press tab ->;You see the full header Html5 tag In the line below type: aside and press tab ->You see the full aside Html5 tag In the line below type: audio and press tab ->You see the full audio Html5 tag
In the line below type: &co –>You see the intellisense support for the html special characters
Add a new folder to your project and rename it to images Add an image to your project and place it in the images folder Drag the image and drop it below the audio tag -> You see the full image tag and the correct path to the image Hint: this works also with css and js files in the head section

CSS Intellisense Support

After the title element type: style and press tab -> You see the full style tag Within the style tag type: a and two curly brackets {} Within the brackets tag type: color:# -> You see the color selector pop up. Hint 1: If you used a color already in your style sheet, you will see them first Hint 2: Use the small arrow on the right to bring up the color picker.

Before the css style closing tag type @media and press tab -> You see the full css media tag Before the css style closing tag type @font-face and press tab -> You see the full font face css tag

Before the css style closing tag add a style for the img tag and type transform img { transform } Press the tab key You see the color picker pop up -> You will see the styles for all the major browsers

Use the rotate function to turn the image upside down by using 180deg as parameter Press the enter key -> You see the rotation method applied to all tags

Intellisense for AngularJS and KnockoutJS

If you are working with AngularJS and/or KnockoutJS, now in Visual Studio 2013, there is intellisense support for these libraries built into Visual Studio. For example, if you type “ng” in an html element, you will get intellisense support specific for AngularJS.

Conclusion

Visual Studio 2013 offers fantastic new features, when it comes to HTML5/JavaScript development. In my opinion, it is the best JavaScript IDE on the market. So, if you did not already: Start coding HTML5/JavaScript with Visul Studio 2013!