Post
Ask Question

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):
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   <head>  
  3.     <title>Visual Studio 2015</title>  
  4.   </head>  
  5. <body style="background-color:Teal">   
  6.    <button type="submit" tooltip="Text written in tooltip attribute" >Save Data</button>  
  7. </body>  
  8. </html>  
 
TooltipInVS2015
 
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):
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title>Visual Studio 2015</title>  
  4. </head>  
  5.   
  6. <body>  
  7.       <%--TRY TO USE TOOLTIP IN HTML ELEMENTS--%>  
  8.       <button type="submit" tooltip="I written am in tooltip" >Save Data</button>  
  9. </body>  
  10. </html>  
 
TooltipInVS2010
 
Notes
 
Before the release of Visual Studio 2015 Preview, we used the "title" attribute to display something on mouse hover.
 
Example 
  1. <body>  
  2.   <button type="submit" title="I written am in title" >Save Data</button>  
  3. </body>  
TitleAtribute
 
# 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): 
  1. #region  
  2.    <br />  
  3.    I am using the #region code in Visual Studio 2015 Preview but it behaves like simple text<br />  
  4.    <button type="submit" title="I written am in title" >Save Data</button>  
  5.    <br />  
  6. #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. 
  1. #region  
  2.   <br />  
  3.   I am using the #region code in Visual Studio 2010but it behaves like simple text<br />  
  4.   <button type="submit" title="I written am in title" >Save Data</button>  
  5.   <br />  
  6. #endregion  
HashRegionInVS2010
 
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  
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="import" href="TestPage.html" />  
  6. </head>  
  7. <body style="background-color:orange">  
  8.      
  9.     <!--CUSTOM ELEMENT IS HAS NO ANY ERROR-->  
  10.     <myCustomElement title="It's my custome element'"></myCustomElement>  
  11.   
  12.     <VS2015 customAtribute="Visual Studio 2015 Preview" cName="cNameVS2015"></VS2015>  
  13.      
  14. </body>  
  15. </html>  
Polymer-element
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="import" href="TestPage.html" />  
  6. </head>  
  7. <body style="background-color:orange">     
  8.       
  9.      <!--POLYMER-ELEMENTS-->  
  10.     <polymer-element name="my-custom-element" noscript>  
  11.         <template>  
  12.             <span>Hello Friends!  from <b>my-custom-element</b>  
  13.                         This is my custom element   
  14.                                  created by polymer element</span>  
  15.         </template>  
  16.     </polymer-element>  
  17.      
  18. </body>  
  19. </html>  
 
PolymerSupport
 
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 
  1. <head>  
  2.     <title></title>  
  3.     <link rel="import" href="TestPage.html" />  
  4. </head>  
 
rel
 

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!


Similar Articles