Improvements in HTML Editor With Visual Studio 2015

Overview

The HTML Editor has now been improved with Visual Studio 2015 Preview. It had been announced by Microsoft at the Visual Studio Connect() event on November 12, 2014. On that day many announcements were made by Microsoft's Professionals, the improvement to the HTML editor is one of those.

Let us learn about the major improvement in the HTML Editor with Visual Studio 2015 Preview. Here Visual Studio 2015 is the latest IDE of Microsoft. Now we are listing all the major improvements of the HTML Editor below.

Tooltip is available
# Region Support
Support for custom elements, polymer-elements and attributes.
Basic IntelliSense for Web Component

Tooltip is Available

As we know before the release of Visual Studio 2015 we couldn't use the tooltip attribute with HTML web components (HTML elements) like Button, Tex, Label, Image, Checkbox or any others but now we can use this attribute with HTML web components also. Now we can use tooltip with HTML elements without any extra help like JavaScript and jQuery.

Example (in Visual Studio 2015 Preview):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Visual Studio 2015</title>
</head>
<body style="background-color:Teal">
<button type="submit" tooltip="Text written in tooltip attribute" >Save Data</button>
</body>
</html>

Notes

The preceding code is written in Visual Studio 2015 in which there is no error found in the editor like the following example written in Visual Studio 2010. But I would like to say that Visual Studio announced this about tooltip but we are getting Intellisense in the Preview version as well. There is no effect on this code. Because this version is released for testing purposes so we may hope that it will work fine in the final release.

Example (in Visual Studio 2010):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Visual Studio 2015</title>
</head>
<body>
<%--TRY TO USE TOOLTIP IN HTML ELEMENTS--%>
<button type="submit" tooltip="I written am in tooltip" >Save Data</button>
</body>
</html>

Notes

Before the release of Visual Studio 2015 Preview, we used the "title" attribute to display something on mouse hover.

Example

<body>
<button type="submit" title="I written am in title" >Save Data</button>
</body>

# Region Support

Now we can use #region in HTML code to separate the specific block of code together as in C#. To use the #region in we need to use a starting tag of the region and an end tag. The following are the start and end tags of #region.

#region: It is the start tag of a # region

#endregion: It is the end tag of a # region

Example (in Visual Studio 2015 Preview):

#region
<br />
I am using the #region code in Visual Studio 2015 Preview but it behaves like simple text<br />
<button type="submit" title="I written am in title" >Save Data</button>
<br />
#endregion

According to Microsoft #region is supportsed in Visual Studio 2015 but in the Preview version it's not working. We hope however that it will be fine in the final release of Visual Studio 2015 because the Preview version is released for testing purposes.

Example (in Visual Studio 2010):

Now we try to write the #region code in Visual Studio 2010 and see what it's effect is.

#region
<br />
I am using the #region code in Visual Studio 2010but it behaves like simple text<br />
<button type="submit" title="I written am in title" >Save Data</button>
<br />
#endregion

Support for custom elements, polymer-elements and attributes

Now Visual Studio 2015 also supports custom elements, polymer-elements and their attributes where polymer-element is a third-party component. It is used to create custom web elements. Let's see how it supports all these things.

Example (in Visual Studio 2015 Preview):

Custom elements

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="import" href="TestPage.html" />
</head>
<body style="background-color:orange">
<myCustomElement title="It's my custome element'"></myCustomElement>
<VS2015 customAtribute="Visual Studio 2015 Preview" cName="cNameVS2015"></VS2015>
</body>
</html>

Polymer-element

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="import" href="TestPage.html" />
</head>
<body style="background-color:orange">
<polymer-element name="my-custom-element" noscript>
<template>
<span>Hello Friends! from <b>my-custom-element</b>
This is my custom element
created by polymer element</span>
</template>
</polymer-element>
</body>
</html>

Basic IntelliSense for Web Component

It also provides some Intellisense for some web controls, like rel path, angular js, angular icons and so on let's do one of these with an example.

Example

<head>
<title></title>
<link rel="import" href="TestPage.html" />
</head>

Summary

In this article, we learned about the new improvements in the HTML Editor in Visual Studio 2015. We will explore more about it after the release of the Final Version of Visual Studio 2015. Thanks!

5 Comments

Join the conversation! Your thoughts help the community grow.

Abhishek Tripathi11y ago
Very useful update..
Guest User11y ago
good one. I liked the comparison b/w VS 2010 & 2015 region display
- Praveen Kumar11y ago
  Thank you Sir!
Michal Habalcik11y ago
I am a #region freak, so now HTML will look more tidy
Bhanu Pratap Singh11y ago
nice improvements!!! making developers life easy...