Visual Studio 2013 HTML Editor...AAARRRRRGGG!

The first version of Visual Studio I used heavily was VS 2003 and since then I've used every version typically installing them immediately upon RTM, sometimes even before. I've loved every version and each one has become progressively better IMO. Historically I've spent very little time working directly with HTML files focusing instead on SOA, desktop, and/or Silverlight applications and components. However, over the last year I've been doing quite a bit of work with HTML and I have to say I'm a bit disappointed in the out of the box experience Visual Studio provides with its HTML editor (at least in VS 2013). The primary cause of my disappointment stems from the implementation of auto-completion features. Auto-completion is a feature I love when working with C# code but with HTML it gets in the way FAR too often. Let's look at a couple examples that make me gnash my teeth almost every time.

To illustrate the first example let's imagine we're working with a div class which has a data- attribute.

<div class="myClass anotherClass" data-stuff="a bunch of stuff">  
    <!-- HTML -->

Let's imagine further that we are having issues getting the div to behave as we want and that we suspect there may be some issues with the class or data- settings. To further analyze where the problem lies we decide to dial back the attribute settings to get to a simpler state but there are enough of them that we'd like to not have to re-type them all at the end. We decide to copy the first line, paste it above and then comment it out to preserve the code. At that point we'd be free to edit the existing div simplifying it as needed while a copy of the original is right in front of us for viewing or restoration. We copy the first line then paste it and we end up with this.

<div class="myClass" data-stuff="imagine may more attributes set">  
    <div class="myClass" data-stuff="imagine may more attributes set">
        <!-- A bunch of HTML --> 

As soon as the paste operation completes auto-completion takes over and everything from that line down gets automatically reformatted (in this case indented) though no div closure is added. So auto-completion indents everything deciding you intend that everything from the new line down is to be inside the new div but it doesn't actually add closure to the new div element. If you comment out the new line the indent remains and now you have to select every line from there down and pull back the indentation. I understand the intent here but it seems to have been implemented somewhat haphazardly. I routinely perform copy/paste operations and this was a major aggravation point every time I did so (I found a solution to this one).

The second example I'll cover also involves the auto-completion functionality. This one may be even more annoying to me than the first because I encounter it on almost every element I create.

Let's say we're adding a button that will be styled usingĀ bootstrap. We start with this.

<button class="btn"  

Typing that you'd notice that as soon as you hit the first " character auto-completion automatically closes the quotes by adding the second and the cursor remains in the middle of the two. You then type the text btn (bootstrap's standard button class). All good so far. At this point the cursor is between the n at the end of btn and the closing " character. Now let's say you want the button to be styled as a primary button. The bootstrap class for that is "btn btn-primary" so you hit space (between the ending n and closing " character) and type btn-primary. This is what end up with.

<button class="btn" btn-primary</pre>  

That's obviously a problem. Auto-completion automatically moves the cursor past the closing " character for the class attribute as soon as you hit space so you can easily end up entering the btn-primary text outside the class attribute's closure where it's not valid. Adding multiple classes to class elements is a very routine thing to do so you end up in the situation where you continually have to re-positioning the cursor back inside the quotation marks after entering a space to complete the class definition. Truly annoying.

Some of these style of issues can be resolved by editing Visual Studio's options. For example the first issue can be resolved by going to Tools -> Options -> Text Editor -> HTML -> Advanced and setting the option "Format on paste" to false. I honestly don't like having to customize options away from defaults though. The default text editor options for C# for example work great for me and I've never felt the need to change them. In fact most of the editor types I've used in Visual Studio have worked great right out of the box. I'm not sure why it's so different for the HTML editor.